Č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).
Související příspěvky:
