Home >> JavaScript >> Změna obrázku po najetí myši

Změna obrázku po najetí myši

Změna obrázku po najetí myši je velmi populární způsob, jak zlepšit vizuální dojem webových stránek. Používají se velmi často u tlačítek (např. ke stažení) nebo u menu, kde je zobrazen obrázek, který se po najetí myši změní v jiný obrázek. Zde je návod, jak takové tlačítko vytvořit.

Budeme potřebovat 2 různé obrázky:

Pro změnu prvního obrázku za druhý po najetí myši, použijeme událost onMouseOver a událost onMouseOut, která změní obrázek po odjetí myši zpět na původní.


<a href="http://www.klikzone.cz/javascript/ukazky/zmena-obrazku-po-najeti-mysi.php"

onMouseOver="self.document['obrazek'].src='obrazky/cerveny.gif';"

onMouseOut="self.document['obrazek'].src='obrazky/zluty.gif';">

<img name="obrazek" src="obrazky/zluty.gif" border="0">

</a>

Výsledek:

Prodleva při načítání druhého obrázku

Pozor na problém, který může nastat, je-li obrázek větší velikosti! Jedná se o prodlevu při načítání druhého obrázku, což nepůsobí zrovna nejlépe. Problém je v tom, že prohlížeč při spuštění stránky nahraje pouze první obrázek (v našem případě žlutý) a druhý (červený) nenačte, protože ho zkrátka nepotřebuje. Ten bude načten až po přejetí myší přes první obrázek. To může způsobit již zmiňovanou prodlevu, která je sice velmi krátká, ale i tak kazí celkový dojem a proto si nyní vysvětlíme jak této situaci předejít.

Tohoto problému se dá celkem elegantně zbavit pomocí jednoduchého skriptu navíc:



<script language="javascript" type="text/javascript">
 
<!--

var prednahrati = new Image();

prednahrati.src = 'obrazky/cerveny.gif';

//-->

</script>

Nyní se bude obrázek načítat již při spuštění stránky a to i přesto, že nebude nikde zobrazován. Bude tedy připraven v momentě, kdy uživatel přejede myší přes první obrázek a bez jakéhokoliv načítaní a prodlevy se zobrazí.