Klikatelné obrázky vložené přes CSS
Problém obrázků vložených přes CSS je, že z nich nejdou snadno udělat odkazy. To se snaží vyřešit Dan Cederholm na SimpleBits v článku Clickable Link Backgrounds. Trik spočívá v použití seznamu a nadefinování obrázku na pozadí jednotlivým prvkům <li> místo odkazu.
Seriál: Používáme CSS
- Přístupné záložky v CSS a JavaScriptu [25. února 2006 14:57]
- JavaScript a CSS: Drag and Drop [29. července 2005 22:05]
- Podtrhněte odkaz libovolnou barvou [22. prosince 2004 16:56]
- Ilustrační obrázek v textu [21. prosince 2004 20:04]
- Výtahy z textu na webu [6. října 2004 14:48]
- Relativní jednotky v CSS [9. srpna 2004 9:53]
- Klikatelné obrázky vložené přes CSS [21. července 2004 8:32]
- Klikací CSS logo [20. června 2004 16:30]
- 3D CSS Box Model [21. května 2004 6:37]
- CSS position:fixed i v IE [10. května 2004 18:42]
- CSS pro tabulky [11. prosince 2003 6:58]
- Okraje v CSS [24. listopadu 2003 7:04]
- Svislé centrování v CSS [19. listopadu 2003 15:57]
- Dvakrát o polohování prvků v CSS [9. listopadu 2003 9:20]
Komentáře
Nechci rýpat, ale tohle je zase "vynalézání kola", jak říkají anglofilové ;-)
Soulasim s Vilemem.
Pokud potrebuji klikatelny obrazek, je tedy soucasti obsahu a ma svou vypovedni hodnotu. Ma byt tedy normalne na popredi. Vymyslet takovehle veci je mozna zabavne a nekdy se to i hodi.
Pokud ma ale obrazek(ikona) vypovedni hodnotu nema na pozadi co delat. Co browser bez stylu? Neprijde tak o zasadni informaci?
Predstavte si, ze byste nevidel ikony na plose. Ikona tech zastupcu je jednoznacne podstatnou informaci treba o typu souboru ktery otevirate(na MS Windows prevazne). Nedokazu si predstavit, ze bych vysypaval kos aniz bych vedel zda v nem neco vubec je, nebo klikal na na nejaky soubor, aniz bych vedel alespon priblizne jakou akci to vyvola.
TO: PePPer
Dovolil bych si nesouhlasit. Pokud chci udělat obrázkové menu a nechci aby se obrázky u nové stránky museli znovu načítat, tak řešení pomocí CSS je dle mého názoru nejlepší. Důležité je, zda ta stránka bude funkční i s vypnutými obrázky nebo bez CSS. Jak to funguje se můžete podívat třeba na adrese http://www.bukvice.org/kotlas
Vesta
P.S. Jak můžete vidět, tak to jde i bez "li" i když v případě menu bych se za něj přimlouval.
Pokud to menu nebude seznam, ztraci to smysl uplne. Pokud nechci aby se mi obrazky nacitali znova pri nacitani dalsi stranky, jednoduse je necham cachovat stejne jako ten styl. Pokud u tech obrazku nastavim ze se nemaji cachovat, ani to ze budou ve stylu to nezachrani. Ja si proste myslim, ze ten obrazek ma jistou vypovedni hodnotu a do stranky patri. Nekdo vypina obrazky, nekdo vypina styly, nekdo vypina oboji. Nekdo si treba prohlizi jen obrazky.
Ta stranka funguje dobre asi. Jde mi jen o logiku toho, proc to tak delat. Tedy: Proc?
TO: PePPER
Omlouvám se za svoji neznalost, ale jak povolím nebo zakážu cachování obrázků?
Jinak odpověď na otázku "proč" je: protože nevím jak povolit/zakázat cachování obrázků, vypadá to dobře na mob. telefonech a PDA (kdyby zobrazovali handheld bylo by to jednoduší) a hlavně mi to příjde z pohledu přístupnosti jako ideální řešení
Vesta
Primarne to zalezi na nastaveni serveru. Pokud to chcete zmenit, musite pouzit nejakou server side technologii ktera posle hlavicky jake potrebujete. Ja bych volil PHP, protoze bych to mel napsane za par minut. Volba je samozrejme na Vas.
Kazdy prohlizec(znam jen dva :-() na Psion(ten jediny znam duverne) a jine prenosne pocitace umoznuje nejake nastaveni co cachovat a co zobrazovat a co ne.
Obrazky se ale co ja vim vetsinou cachuji stejne jako stylesheety.
[1] Spíše opakovaní matka moudrosti, protože objevit něco opravdu "nového" je moc moc těžké.
[2] - [6] Ten obrázek je ilustrační, proto by měl být v CSS. Jestliže by ale nesl nějakou informaci, tak patří do HTML.
jestli je ten obrazek ilustracni je podle me sporne. Pokud to bude web pro deti, bude dulezitejsi videt ten obrazek nez text. Ten obrazek jasne patri k tomu odkazu a je to druha moznost jak se orientovat. Pokud je neco ilustracni, nemelo by to byt klikatelne.
Další příspěvky
- Aktuální příspěvky
- Novější příspěvky
- Grafická knihovna GD podporuje nyní i GIF [23. července 2004 9:23]
- HTML a XHTML FAQ [23. července 2004 0:47]
- Webhostingy, freehostingy, freemaily [22. července 2004 17:40]
- Starší příspěvky
- PageRank Toolbar pro Mac [13. července 2004 12:15]
- FeedBurner headline animator [12. července 2004 0:13]
- Jak dlouhý je život chyby v Mozille? [10. července 2004 23:29]
- Všechny příspěvky za měsíc červenec 2004



