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 |
---|---|
Kuvakartta suodin on paljon tehokkaampi ja kehittyneempi työkalu herkkien kuvien luomiseen. (Mutta se on myös paljon monimutkaisempi...) |
Useimmat asetuksista ovat itsestään selviä, mutta kaikesta huolimatta
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.
HTML-tiedoston nimi. Voit vaihtaa tiedostonimen käyttämällä tekstiruutua.
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.
Voit valita luotko kuvatiedostot GIF, JPG, tai PNGtiedostoformaatissa.
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.
Tämä arvo (0-15) syötetään ”soluväli” attribuuttina HTML-taulukkoon. Tuloksena vaakasuorat ja pystysuorat opasteet korvataan määritellyn levyisillä raidoilla:
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.
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; } }
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ä.