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.
Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.
Blogimerkintää "Navigaatio yhdessä kuvassa." muokattiin viimeksi 7123 päivää sitten, eli lauantaina. Kirjoitukseen on julkaistu kommentteja 4 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Selaat tällä hetkellä blogimerkintää Navigaatio yhdessä kuvassa. Se julkaistiin 13. ä. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!
