depi.sk – svet očami Erika Gyepesa

CSS tip: Nahradenie nadpisu s odkazom obrázkom

Máme tu koniec týždňa a začiatok sviatočného Veľkonočného víkendu. Ja mám za sebou pracovný týždeň počas, ktorého som sa vŕtal v CSS((Cascading Style Sheets))ku ako červík v jablku. Prinieslo mi to však súčasne veľa nových poznatkov a o jeden by som sa s vami veľmi rád podelil, keďže je to stále aktuálny “problém” – nahradenie nadpisu s odkazom obrázkom.

Ak sa ako webdesigneri držíme prístupnosti a použiteľnosti webstránok, určite sa stretneme s problémom ako nahradiť obrázkový header s rovnocenným textovým nadpisom s odkazom napr. na titulku webstránky, ktorý jednak bude prístupný pre vyhľadávacie roboty a taktiež aj pre ľudí s určitým typom hendikepu.

Tento problém sa samozrejme nerieši len pár dní a existuje dokonca už pár rokov, preto sa na internete objavilo už niekoľko riešení. Jedným z nich je tzv. “Fahrner Image Replacement”:http://www.alistapart.com/articles/fir/ (FIR), ktoré však nie je celkom správne, lebo funguje na princípe: zobraz obrázok a text pod ním ukry – čo väčšina screen readerov((čítačka pre hendikepovaných)) neprečíta.

Jedným z tých lepších riešení je urobiť to nasledovne: zobrazíme text, ktorý *spanom* nastaveným ako blokový element naťahujúcim obrázok do pozadia, prekryjeme text pod ním. Text teda zostáva len prekrytý a nie je celkom neviditeľný, alternatívny text sa teda zobrazí nielen pri vypnutých CSS štýloch, ale taktiež iba pri vypnutých obrázkoch v prehliadači.

Poďme si teraz ukázať ako to vyzerá v praxi. Použijeme nasledovnú (X)HTML šablónu:

[code lang=”html”]

[/code]

Vytvoríme si blok *header*, v ktorom budeme mať hlavný nadpis *h1* s odkazom na titulku webstránky. Medzi tagy *a* vložíme prázdny tag *span*, ktorého funkciu hneď popíšem.

Celé to bude fungovať tak, že *h1* nám zobrazí hlavný nadpis odkazujúci napr. na titulku webstránky. Prázdne tagy *span* nám cez CSS načítajú obrázok, ktorý bude prekrývať hlavný nadpis. Toto nám zaručí, že sa nadpis zobrazí aj pri vypnutých obrázkoch. Poďme sa teraz pozrieť ako to bude vyzerať v CSS:
[code lang=”css”]
* {
margin: 5px;
padding: 0;
}

#header {
width: 156px;
height: 89px;
position: relative;
text-align: left;
}

#header span {
display: block;
width: 156px;
height: 89px;
background: url(“images/logo.png”) no-repeat;
position: absolute; top: 0; left: 0;
z-index: 1;
cursor: pointer;
text-decoration: none;
}
[/code]

Výsledok môžeme vidieť “na tomto príklade”:http://www.depi.sk/examples/nahradenie-nadpisu-s-odkazom-obrazkom.html.

Tento spôsob je už celkom použiteľný, funguje vo všetkých najnovších prehliadačoch – IE 6, FF 1.5, Opera 8.5-9, Konqueror 3.5.2, Epiphany 2.14.1, ELinks 0.11.1 (zaujímalo by ma ešte Macovské Safari)
Bolo by dobré keby sa takéhoto niečoho držali aj popredný webdesigneri. Len zbežne som si pozrel pár stránok v “CSS galériách”:http://depi.sk/2006/03/13/css-galerie-miesto-pre-inspiraciu/ a na väčšine z nich sa mi alternatívny nadpis pri vypnutých obrázkoch nezobrazil. Dokonca ani na väčšine stránok samotných CSS galérií.

Na záver ešte spomeniem aj nevýhodu tohto riešenia: pri malých obrázkoch prekrývajúcich nadpis sa môže stať, že pri dlhších nadpisoch text vylezie spod obrázku. Dá sa to však čiastočne ošetriť zmenšením veľkosti písma nadpisu.

Prihlás sa na odber zaujímavých informácií e-mailom

* povinné polia
  • http://www.m-ayo.net #MaYo

    Funguje to aj v safari. Mam to rovnako riešené na niektorých weboch a v safari to ide v pohode.

  • http://blog.gluchman.sk XThom

    Nj, toto je správne riešenie, ibaže ešte stále sa nájde niekoľko “expertov”, ktorí príliš na prístupnosť nedbajú.

    Dovolím si ťa v pár detailoch opraviť (a doplniť :)). Žiaden element nesmie byť podľa špecifikácie prázdny, teda je potrebné SPAN vyplniť aspoň (a asi jedine) nedeliteľnou medzerou ( ). Zároveň je správnejšie použiť ako hodnotu atribútu cursor “pointer”, “hand” je myslím, že microsofťácky výmysel :) A myslím, že je potrebné nastaviť nadpisu H1 vlastnosť position: relative, aby sa ti ten SPAN poziroval absolútne len v tomto elemente (inak sa pozicuje vzhľadom na stránku – resp. dokument).

    Teraz ma ale napadlo (a zatiaľ som to nevyskúšal), že by sa prečnievajúci text dal “skryť” pomocou overflow: hidden. Nevýhodou tohto riešenia by bolo však to, že tomu, kto má vypnuté obrázky by sa takýto orezaný text aj zobrazil, teda šlo by tu o riešenie jedného problému s vytvorením ďalšieho.

    ;)

  • http://blog.gluchman.sk XThom

    Tá medzera v zátvorke má byť samozrejme “ ” :)

  • http://www.depi.sk Erik Gyepes

    **XThom:** Ahoj Tomi :) Diky za tieto trefne poznamky. Co sa tyka tych prazdnych tagov, mas asi pravdu. Ale trocha som z toho zmeteny, pretoze moj interny validator vo Firefoxe tuto chybu hlasi, avsak W3C validatorom to preslo i ked je pravda, ze ani ten nie je dokonaly. Taktiez som sa s tymito prazdnymi spanmi stretol na viacerych strankach, ale spravne to bude asi s tou medzerou “ ”

    Ten cursor: pointer som neskusal, ale on je tam vlastne aj kvoli tomu Microsoftu, teda kvoli ich IE, lebo ten tam z pre mna neznamych dovodov nad obrazkom nezobrazi tu “ruku” a potom je to trocha zavadzajuce, ale skusim vyskusat potom ten “pointer”.

    Ten precnievajuci text sa da skryt pomocou overflow:hidden, sam som to skusal, ale pri malych obrazkoch je to opat nie najlepsie riesenie, lebo dlhe nadpisy sa nezobrazia cele.

    V kazdom pripade diky za tipy, clovek sa stale sa uci :)

  • http://www.advis.sk advis

    Iba doplním že príklad sa dá otestovať cez bezplatnú službu http://browsershots.org. Okrem rôznych prehliadačov (aj safari) môžeš stránky testovať aj v rôznych rozlíšeniach obrazovky pri rôznej farebnej hĺbke.