Datatekniikka ja viestintä -
Web:Kuva, joka koostuu vain yhdestä läpinäkyvästä kuvapisteestä (pikselistä), on normaalisti näkymätön. Siitä on joskus hyötyä joissakin tempuissa Web-sivuilla. Erityisesti sen avulla voi tehdä "piilolinkin", jota ei sivun graafisesta esityksestä huomaa mutta joka voi tekstitilassa toimia normaalina linkkinä. "Näkymättömällä kuvalla" voi myös saada "tyhjää sisältöä" taulukon soluun, ja tällä on merkitystä, koska sellaisella voi vaikuttaa eräiden selainten tapaan näyttää solu. Aivan toisenlainen käyttötarkoitus tiedon hankkiminen selaimelta palvelimelle kuvaviittauksella, ns. web bug.
Jos esimerkiksi Web-sivuston jokaisen sivun alussa on pitkä "navigointivalikko", on hankalaa liikkua sivustossa äänisynteesiin perustuvalla käyttötavalla. Puhesyntetisaattori alkaa aina lukea sivun sisältöä alusta alkaen. Tällöin käyttäjä joutuu siis aina kuulemaan samat, ehkä pitkätkin listat.
Sivun alussa saattaa olla muutakin aineistoa, jonka halutaan näkyvän heti alussa mutta joka häiritsee kuulo- tai tuntoaistiin perustuvassa selailussa. Tällainen voisi olla vaikkapa joka sivun alussa oleva tunnuslause.
Asiaa voi auttaa sillä, että ihan alussa on linkki, joka johtaa sivun varsinaisen sisällön alkuun. Ja jos sivuntekijästä tuntuu, että sellainen linkki häiritsee tavallisessa graafisessa selailussa, hän voi tehdä linkistä "piilolinkin".
Piilolinkki voi olla seuraavanlainen:
<a href="#alku"><img alt="Sisällön alkuun." src="transp.gif"
width="1" height="1" border="0"></a>
Sellainen on esimerkiksi tämän sivun alussa, juuri ennen
sanaa "Datatekniikka". Jos käytät graafista selainta, et luultavasti huomaa
mitään. Jos taas käytät esimerkiksi Lynx-tekstiselainta, sivun alussa näkyy
suunnilleen näin:
Sisällön alkuun. Datatekniikka ja viestintä - Web:
Tässä tapauksessa piilolinkistä ei ole paljoakaan hyötyä, koska ohitettavia navigointilinkkejä on vähän. Mutta jos niitä on tusinan verran tai jopa kymmeniä kuten joskus, piilolinkki on käytännöllinen.
Piilolinkki ei aina pysy piilossa graafisen selaimen
käyttäjältä. Ensinnäkin joskus kuva voi jäädä latautumatta.
Silloin selain saattaa näyttää "rikkinäisen kuvan symbolin" tai
sitten käyttää alt-tekstiä. Seuraavassa on
tämän mahdolliseksi havainnollistamiseksi
piilolinkkimme tahallisesti rikottuna lainausmerkkien välissä:
"
". Toiseksi jos käyttäjä siirtyy
linkistä toiseen tab-näppäintä käyttäen, hän voi päätyä myös
piilolinkin kohdalle. Hän ei ehkä huomaa tätä mistään muusta kuin siitä,
että hän ei päässyt kohtaan, jossa näytti olevan seuraava linkki.
Ongelma on suhteellisen pieni. Käyttäjähän pääsee toki eteenpäin
painamalla tab-näppäintä uudestaan.
Teknisesti kyse on yksinkertaisesta ja pienestä asiasta.
Yksipikselinen läpinäkyvä gif-kuva, englanniksi
transparent single-pixel GIF, on varsin pieni
tiedosto, ja sellaisen voi hakea vaikkapa osoitteesta
http://jkorpela.fi/images/transp.gif
Jos haluat käyttää sitä, sinun kannattaa kopioida se itsellesi
omien Web-sivujesi alueelle jollakin sopivalla nimellä, vaikkapa
transp.gif, ja viitata siihen eikä edellä olevaan
osoitteeseen. Tällöin vältät sen riskin, että sinun sivusi eivät
toimi kunnolla vain sen takia, että jokin palvelin jossakin muualla
ei toimi tai siihen ei ole yhteyttä.
Tyypillisellä graafisella selaimella (esimerkiksi
Internet Explorer,
Netscape tai
Opera) voit hiirellä viedä kursorin edellä
olevan linkin kohdalla ja napsauttaa hiiren oikeanpuoleista
nappia ja sitten valita avautuvasta valikosta vaihtoehdon
"Tallenna kohde nimellä..." tai "Save target As"
tai jotain vastaavaa.
Joissakin erikoistilanteissa voisi käyttää "näkymätöntä kuvaa" silloin, kun olisi tarpeetonta tai jopa häiritsevää esittää mitään niille, jotka näkevät sivun graafisen esityksen, mutta muille haluttaisiin kertoa jotain. Yksi mahdollisuus olisi tehdä näin silloin, kun sivusta on erillinen tekstiversio, johon halutaan viitata linkillä. Rakennehan olisi tällöin hyvin samantapainen kuin edellä käsitelty piilolinkki. Toisaalta käyttäjä saattaa eri syistä olla kiinnostunut tekstiversiosta vaikka näkisi kuvat, joten ihan tavallinen linkki on yleensä parempi.
"Näkymätön kuva" voisi olla sivulla myös sellaisenaan, ilman, että
se on linkki minnekään. Käyttötarkoitus voisi olla vaikkapa sellainen,
että alt-teksti kertoo jotain, joka on kuvat näkevälle
ilmeistä mutta ei muutoin lainkaan ilmeistä. Esimerkki
kuvitteelliselta sivulta:
<img alt="Tämän sivun sisältönä on pelkästään kahdeksan valokuvaa Eduskuntatatalosta ilman selityksiä." src="transp.gif"
width="1" height="1">
Useat selaimet käsittelevät täysin tyhjää taulukon solua
(<td></td>) eri tavalla kuin normaalia solua.
Ne saattavat jättää muutoin piirtämänsä reunaviivat pois taikka jättää
taustavärin tai -kuvan pois.
Tavallisin menettely asian hoitamiseksi on kirjoittaa solun sisällöksi
sitova välilyönti, no-break space, tällä tavoin:
<td> </td>.
Seuraava esimerkki sisältää taulukon, jossa on kaksi 50 pikselin
levyistä solua,
tyhjä solu ja mainitulla tavalla keinotekoisesti täytetty solu.
Taulukolle on määritelty keltainen taustaväri ja kolmen pikselin levyinen
reunus solujen ympärille.
Solujen ulkoasu saattaa olla erilainen:
Tyypillisesti selaimet tällöin jättävät reunaviivan pois tyhjän solun ympäriltä; HTML 3.2 -määrittely jopa antoi ymmärtää, että niin niiden tuleekin toimia. Netscape-selaimet saattavat lisäksi jättää taustavärin huomiotta eli näyttävät kyseisen solun taustana sivun yleisen taustan.
Vaikka tällaiset esitysasuseikat pitäisi oikeastaan hoitaa toisin, tyylisäännöstöillä (CSS), menettely sinänsä toimii melko hyvin. Jos kuitenkin tyhjän solun halutaan olevan hyvin pieni leveys- tai pystysuunnassa, muodostuu rajoittavaksi tekijäksi se, että sitova välilyönti on ihan oikea merkki. Sillä on siis jokin leveys ja korkeus, joten solua ei saa mielivaltaisen pieneksi. Seuraavassa on yritetty saada edellä olevan taulukon rivi neljän pikselin korkuiseksi mutta siinä todennäköisesti epäonnistutaan:
Pienentäminen kuitenkin onnistuu, kun sitovan välilyönnin asemesta
käytetään "näkymätöntä kuvaa", koska se vie tilaa vain yhden pikselin.
Merkkaus on tällöin muotoa
<td><img alt="" src="transp.gif" width="1" height="1"></td>
ja ulkoasu seuraavanlainen:
|
Lisätietoja: Empty cells in HTML tables.
Eräiden havaintojen mukaan selaimet eivät aina osaa käsitellä
yhden pikselin kuvaa oikein, ellei img-tägissä ole määritteitä
width="1" height="1", vaikka ne ovat periaatteessa
tarpeettomat. (Tieto kuvan ulottuvuuksista on itse kuvassa.) Lisäksi
huomattakoon, että taulukon cellpadding-määritteen arvo
vaikuttaa solun näkyvään kokoon. Koska kyseisen määritteen oletusarvo
on tyypillisesti pieni kokonaisluku, voi olla tarpeen asettaa
cellpadding="0", jos halutaan solu vain yhden
tai muutaman pikselin
korkuiseksi tai levyiseksi.
Aivan toisenlainen kuin edellä kuvatut käyttötarkoitukset
on yksipikselisen läpinäkyvän kuvan käyttö sitä varten, että
Web-palvelin saa tietoa selaimelta, esimerkiksi siitä, että
käyttäjä käy jollakin sivulla. Ideana on, että sivulle pannaan
mainitunlainen img-elementti
ja että selain lähettää palvelimelle pyynnön saada kyseinen kuva
näytettäväksi ja palvelin tallentaa tiedon tästä pyynnöstä.
Yleensähän img-elementin src-määrite
viittaa käytännössä kuvatiedostoon, mutta se saattaa viitata myös
palvelimessa toimivaan ohjelmaan (skriptiin), joka tallentaa tiedon
viittauksesta ja sen alkuperästä ja vain sivumennen lähettää
selaimelle myös kuvan. Tarkoitukseen voisi käyttää mitä tahansa kuvaa,
mutta yksipikselinen läpinäkyvä kuva hoitaa asian vaikuttamatta
mitään sivun ulkoasuun.
Lisätietoja on esimerkiksi Webopedia-artikkelissa Web beacon.
Menettely saattaa muodostaa uhan käyttäjän yksityisyydelle, koska se voi mahdollistaa selailun huomaamattoman seuraamisen. Käytännössä asian suurin merkitys lienee siinä, että mainostajat yms. voivat seurata sivujen suosiota.
