15.4. Halkaise

15.4.1. Yleiskatsaus

Kuva 17.391. Esimerkki Halkaise suotimelle

Esimerkki ”Halkaise” suotimelle

Alkuperäinen kuva ohjeiden kanssa

Esimerkki ”Halkaise” suotimelle

Halkaise lisätty


This filter is a simple and easy to use helper for creating sensitive images to be used in HTML files. The filter slices up the source image (like the Slice Using Guides command does) along its horizontal and vertical guides, and produces a set of sub-images. At the same time it creates a piece of HTML code for a table saved in a text file. Every table cell contains one part of the image. The text file should then be embedded in an HTML document.

Huomaa, että tämä suodin on todella yksinkertainen apuri. Tyypillinen suotimen tuottama HTML-koodi ei välttämättä ole tämän enempää:

Esimerkki 17.1. Yksinkertainen Halkaise suotimen tulosteen esimerkki

<table cellpadding="0" border="0" cellspacing="0">
  <tr>
    <td><img alt="" src="slice_0_0.png"/></td>
    <td><img alt="" src="slice_0_1.png"/></td>
  </tr>
  <tr>
    <td><img alt="" src="slice_1_0.png"/></td>
    <td><img alt="" src="slice_1_1.png"/></td>
  </tr>
</table>
        

Tuotettu HTML-koodi; tyyli attribuutti on jätetty pois.


Kun kuvassa ei ole opasteita, niin suodin ei tee mitään. Suodin kuitenkin toimii, jos opasteet ovat vain piilossa.

[Vihje] Vihje

Kuvakartta suodin on paljon tehokkaampi ja kehittyneempi työkalu herkkien kuvien luomiseen. (Mutta se on myös paljon monimutkaisempi...)

15.4.2. Käynnistä suodin

Löydät tämän suotimen kuvan ikkunavalikosta SuotimetWebHalkaise….

15.4.3. Asetukset

Kuva 17.392. Halkaise asetukset

”Halkaise” asetukset

Useimmat asetuksista ovat itsestään selviä, mutta kaikesta huolimatta

Polku HTML-viennille

Minne HTML-tiedosto ja kuvatiedostot tallennetaan. Oletuksena nämä tiedostot tallennetaan nykyiseen työhakemistoon. Painamalla oikealla olevaa painiketta avaat pudotusvalikon, josta voit valita toisen kohteen.

Tiedostonimi viennille

HTML-tiedoston nimi. Voit vaihtaa tiedostonimen käyttämällä tekstiruutua.

Kuvan nimen etuliite

Tämän suotimen tuottaman kuvatiedoston nimi prefix_i_k.ext, jossa etuliite on osa tiedostonimestä, jonka voit valita vapaasti käyttäen tekstiruutua oikealla, oletuksena halkaise. (i ja k ovat rivien ja sarakkeiden numeroita, jotka alkavat 0:sta; .ext on tiedostonimen laajennus riippuen valitusta kuvaformaatista.)

Tämä asetus on erityisen hyödyllinen, kun haluat luoda JavaScriptin osoitukselle ja painetulle sekä tarvitset erilaisia kuvien sarjoja.

Kuvaformaatti

Voit valita luotko kuvatiedostot GIF, JPG, tai PNGtiedostoformaatissa.

Erillinen kuvakansio, Kansio kuvien vientiin

Kun Erillinen kuvakansio on käytössä, niin kansio luodaan kuvien sijoittamista varten. Oletuksena tämän kohdekansion nimi on kuvat, mutta voit vaihtaa sen Kansio kuvien vientiin tekstiruudusta.

Esimerkki 17.2. Erillisen kuvakansion kanssa

Tulos käytössä olevalle Erilliselle kuvakansiolle


Tila taulukon elementtien välissä

Tämä arvo (0-15) syötetään soluväli attribuuttina HTML-taulukkoon. Tuloksena vaakasuorat ja pystysuorat opasteet korvataan määritellyn levyisillä raidoilla:

Esimerkki 17.3. Tila taulukon elementtien välissä

Vastaava HTML-koodin pätkä


Huomaa, että kuva ei suurene näiden raitojen koon mukaan. Sen sijaan tuloksena saatu HTML-kuva näyttää kuin olisit piirtänyt siihen raitoja Pyyhekumi-työkalulla.

JavaScripti osoitukselle ja painetulle

Kun tämä asetus on käytössä, niin suodin lisää myös hieman JavaScript-koodia. Kuten HTML-koodinkin kanssa, tämä koodi ei toimi sellaisenaan, vaan se on hyvä lähtökohta dynaamisen toiminnallisuuden lisäämiseksi. JavaScript-koodi tarjoaa toiminnallisuutta, joka käsittelee tilanteita kuten osoitus:

Esimerkki 17.4. JavaScript-koodin pätkä

function exchange (image, images_array_name, event)
  {
    name = image.name;
    images = eval (images_array_name);

    switch (event)
      {
        case 0:
          image.src = images[name + "_plain"].src;
          break;
        case 1:
          image.src = images[name + "_hover"].src;
          break;
        case 2:
          image.src = images[name + "_clicked"].src;
          break;
        case 3:
          image.src = images[name + "_hover"].src;
          break;
      }
  }
              

Ohita animaatio taulukon otsikoille

Ollessaan pois käytöstä, suodin lisää <a href="#"> ... </a> hyperlinkin pätkän jokaiseen taulukon soluun. Ollessaan käytössä (tämä on oletuksena) ja kun olemassa on vähintään kaksi vaakasuoraa tai pystysuoraa opastetta, suodin ei lisää hyperlinkin pätkää ensimmäiseen ja viimeiseen soluun sarakkeessa tai rivissä. Tämä voi olla hyödyllistä, kun sinulla on rajan omaava kuva etkä halua tehdä rajasta herkkää.

Esimerkki 17.5. Ohitettu animaatio taulukon otsikoille (yksinkertaistettu HTML-koodi)

<table cellpadding="0" border="0" cellspacing="0">
  <tr>
    <td><img alt="" src="images/slice_0_0.png"/></td>
    <td><img alt="" src="images/slice_0_1.png"/></td>
    <td><img alt="" src="images/slice_0_2.png"/></td>
    <td><img alt="" src="images/slice_0_3.png"/></td>
  </tr>
  <tr>
    <td><img alt="" src="images/slice_1_0.png"/></td>
    <td><a href="#"><img alt="" src="images/slice_1_1.png"/></a></td>
    <td><a href="#"><img alt="" src="images/slice_1_2.png"/></a></td>
    <td><img alt="" src="images/slice_1_3.png"/></td>
  </tr>
  <tr>
    <td><img alt="" src="images/slice_2_0.png"/></td>
    <td><img alt="" src="images/slice_2_1.png"/></td>
    <td><img alt="" src="images/slice_2_2.png"/></td>
    <td><img alt="" src="images/slice_2_3.png"/></td>
  </tr>
</table>
              

Vain sisemmillä soluilla on (tyhjiä) hyperlinkkejä.