Hotová řešení > Změna obrázku při najetí kursoru

Změna obrázku při najetí kursoru

Často na Internetu narážím na dotaz, jak udělat, aby se obrázek, na který najedu kursorem myši změni, změnil na jiný. Nejčastější odpovědí bývá, že to lze řešit pomocí JavaScriptu.

JavaScript však někdo má v prohlížeči vypnutý. I když se jedná o malou část uživatelů/uživatelek, proč to neudělat tak, aby to fungovalo i jim. Navíc, kvalitní JS řešení je krapánek složitější. Řešit se to dá pomocí CSS. Ano, ano, i styly mohou mít někteří vypnuty, ale to už je pouze minimum případů.

Následující řešení vymyslel pan inženýr Radek Kudela, na Internetu známý pod přezdívkou habendorf. Za souhlas k publikování mu děkuji. Řešení je elegantní, ne však moc známé. Existují sice další, více či méně, podobné způsoby, jak měnící se obrázek nakódovat, avšak tento se mi jeví jako nejlepší.

CSS

a {display: block; width: 304px; height: 228px; overflow: hidden;}
a:hover {text-indent: -304px;}
a img {border: none;}


HTML

<a href="#"><img src="motyl12.jpg" width="608" height="228" alt="Tropický motýl" /></a>

Jedná se vlastně o jeden obrázek, který má dva stavy. Pomocí CSS mu je definována poloviční šířka (první stav). Při najetí myši je pak obrázek posunut pomocí CSS vlastnosti text-indent (druhý stav).

Výsledek v prohlížeči

Stáhnout uvedené řešení ↓ (ZIP, staženo 2517×)

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist