Hyvä ihminen! Tämä ei ole blogin etusivu. Täällä on tagiin "piiloteksti" kytketyt jutut.
Aloittakaamme. Tässä on JPG-muotoon tallennettu kuvatiedosto, joka tulee käyttöön Gootti.net-sivustolla. Kuvassa näkyy kaikki sivuston osiot: Etusivu, Palaute, Arkisto, Foorumi ja Tapahtumakalenteri. Kuvan yläosan linkit esitetään kun ne ovat passiivisia ja vastaavasti taas alaosan rivissä näkyvät linkit esitetään silloin kun linkin ylle on viety hiiren osoitin (:hover) tai kun linkki on valittu (:focus). Tämäkin systeemi perustuu siihen keksintöön, jossa yhdestä kuvatiedostosta esitetään vain haluttu osa.
<ul id="navigaatio">
<li id="etusivu"><a href="#">Etusivu</a></li>
<li id="palaute"><a href="#">Palaute</a></li>
<li id="arkisto"><a href="#">Arkisto</a></li>
<li id="foorumi"><a href="#">Foorumi</a></li>
<li id="tapahtumakalenteri"><a href="#">Tapahtumakalenteri</a></li>
</ul>
Navigaation jokaiselle linkille on laitettava id-tunniste sen takia, että olisi jotain johon tarttua CSS-tiedostosta käsin.
CSS:n avulla laitetaan sitten navigaation esitystapa halutunlaiseksi: nollataanpa aluksi vaikkapa luettelon paddingit ja marginaalit sekä asetaan luettelon leveys ja korkeus sekä sen taustakuva.
ul#navigaatio {
list-style: none;
margin: 0;
padding: 0;
width: 700px;
height: 50px;
background: #333 url(../images/navigaatio.png) no-repeat 0 0;
}
Seuraavaksi luettelon luettelorivit ja luettelorivien sisällä sijaitsevat linkit:
#navigaatio li {
display: inline;
}
#navigaatio li a {
display: inline;
float: left;
overflow: hidden;
text-indent: -9999px;
height: 50px;
}
Seuraavaksi vastassamme onkin se jännittävin ja ehkä hankalimmalta tuntuva vaihe. Laitetaan navigaation linkeille taustakuvat paikoilleen. Viritetään ensin navigaation vasemman laidan Etusivu-linkki paikoilleen laittamalla sen vasempaan laitaan marginaalia ja määrittelemällä linkin leveys.
#navigaatio li#etusivu a {
width: 75px;
margin-left: 95px;
}
Jatketaan saman linkin muotoilemista antamalla sille :focus-tilaa ja :hover-tilaa varten ohjeet kuinka käyttäytyä. Koska linkin sekä :focus ja :hover tulevat olemaan samanlaisia, voidaan ne määritellä samassa ryppäässä:
#navigaatio li#etusivu a:focus,
#navigaatio li#etusivu a:hover {
background: url(../images/navigaatio.png) no-repeat -95px 100%;
}
Yllä näkyvässä koodissa määritellään vain taustakuva. Ensin linkitetään taustakuvaan, sitten kerrotaan sille ettei taustakuvaa toisteta (no-repeat), jonka jälkeen vedetään taustakuvaa vaakatasossa haluttu määrä linkin taustalle. Arvo 100% koodiesimerkissä ilmoittaa kuvatiedostolle, että nytpäs otetaan sieltä kuvatiedoston alaosasta pikselit esiin. Jos em. koodiesimerkin lopussa oleva arvo olisi nolla (0), tulisi silloin näkyviin taustakuvan yläosasta 50 pikseliä korkea palikka, jonka leveys on 75 kuvapikseliä.
Loput navigaation linkit sijoitellaan paikoilleen samaan tyyliin kuin tuo ensimmäinenkin. Asetaan jokaiselle linkille sopiva leveys ja sen jälkeen voidaan laittaa :focus- ja :hover-efekti. Jos jokaisen linkin leveys on sama, ei silloin tietenkään tarvitse määritellä erikseen jokaisen linkin leveyttä, vaan se voidaan tehdä vaikkapa näin:
#navigaatio li a {
display: inline;
float: left;
overflow: hidden;
text-indent: -9999px;
height: 50px;
width: 80px; /* Leveys ilmoitetaan tuossa vasemmalla */
}
Huom. Optimointi.com:in foorumilla on käyty keskustelua piiloteksteistä nettisivuilla. Viestiketjussa esitetään pieniä uhkakuvia ja vihjauksia siitä, että piilotekstit (sisältää myös ns. image replacement -tekniikat) nettisivuilla voidaan tulkita spammiksi tai ylioptimoinniksi.
Tagit: navigaatio, piiloteksti
Kännykänkäyttäjät, ja muutkin myös, käykääpä vastaamassa kyselyyn!
