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
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 4 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Korinaa. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2006/05/13/navigaatio-yhdessa-kuvassa.
Miika Keisu kirjoitti 729 päivää sitten:
Hienoo Petri! Tää on niitä parhaimpia (tai ainakin hyödyllisimpiä) CSS-kikkoja mitä tiedän, vaikken nyt niin paljoa tiedäkkään.. Tästä tosin olen tiennyt ennenkin, kun olen käyttänyt tätä omissanikin projekteissa. Mutta hyvä tämä sinun “pikku opas” on, ei taida suomeksi paljon muualta löytyäkkään. :) Ehkä hieman enemmän olisi kaivannut selitystä nuo kohdat, että miksi jonkun pitää olla juuri näin jne, oppisivat aloittelijatkin paremmin sitten itsenäiseen työskentelyyn.. Mutta hyvä näinkin!
Teme kirjoitti 729 päivää sitten:
En ensin ymmärtänyt että mikä järki tuossa on. Sitten tuli sellainen “ahaa” elämys kun vähän aikaa pyörittelin koodia päässäni. Aika pätevä keksintö.
Tomppa kirjoitti 728 päivää sitten:
Sanoisin kyllä näin, että kuvanvaihtotekniikka on turvallinen ja sallittua käyttää silloin, kun teksti vastaa kuvaa. Ongelmat todennäköisesti tulevat silloin vastaan, kun tekstiin lisätään ylimääräisiä avainsanoja.
Jos näin ei olisi, tipahtaisivat muun muassa erittäin monet suositut “SEO” blogit/sivustot pois indeksistä.
kuopassa kirjoitti 726 päivää sitten:
Miika K.: Kiitosta vaan, mukavaa saada noin perusteltua palautetta. En jokaisessa artikkelissa tai oppaassa viitsi ihan juurta jaksain selittää jokaista yksityiskohtaa, sillä oletan lukijoiden olevan perillä XHTML:n ja CSS:n perusteista. Kannattaa lukea tämän blogin vanhoja artikkeleita, niitä joissa on sivuttu samaa aihetta.
Teme: Ahaa, hahaa. Tuolla tavalla toteutettaessa navigaatio tulee ladatuksi vain yksi kuvatiedosto, jonka jälkeen ei tarvitse muita kuvia (navigaatiossa) ladata. Miinukseksi voisi laskea sen, että kuvan tiedostokoko todennäköisesti tulee tuntumaan massiiviselta…
Tomppa: Jep, ajattelen samoin. Se mikä näkyy kuvassa tulisi olla tekstimuodossa siellä kuvan alla, eli jos kuvassa lukee “Kahvinkeitin” niin silloin sana “Kahvinkeitin” tulisi lukea siellä sisällössä.