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).

Jiří Šarišský

Author

Jiří Šarišský

Programování a webdesign je moje práce i koníček, svůj čas ale rozhodně netrávím jen jimi. Zajímám se o historii i současnost, hraji na kytaru v místní kapele a o víkendech rád vyrážím na vandry. O svých zážitcích rád píši na svém osobním blogu, sem pak přispívám dalšími zajímavostmi o obecnějších tématech.