V jednom z předcházejících článků jsme si ukázali, jak s pomocí JavaScriptu docílit změny obrázku po jeho přejetí kurzorem myši. Dnes si ukážeme podobný skript, který umožní měnit obrázek umístěný na jiném místě stránky po najetí kurzorem na textový nebo obrázkový odkaz. Tímto způsobem lze vytvořit jednoduchou „prohlížečku“ obrázků.

Skript lze využít především při zobrazování různých variací téhož předmětu (např. barevné variace výrobku v internetové prodejně), a tím zpřehlednit a oživit Vaše webové stránky. (Původní skript viz předcházející článek.) Postup je následující. Nejdříve je nutné načíst obrázky, které se budou zobrazovat do cache počítače. K tomu využijeme příkaz new Image().

<script language=“JavaScript“>
<!–
cache1=new Image();
cache1.src=“blue.gif“;
cache2=new Image();
cache2.src=“green.gif“;
cache3=new Image();
cache3.src=“red.gif“;
cache4=new Image();
cache4.src=“grey.gif“;
// –>
</script>


Tímto způsobem zabráníme tomu, aby prohlížeč natahoval obrázky ze serveru při jejich zbrazování. Obrázky již budou načtené v cache a tím bude jejich změna bude okamžitá. Záměna bude prováděna následujícím skriptem:

function change_image(obr,nazev)
{
obr.src= nazev + „.gif“;
return false;
}


Ke změně dochází díky vlastnosti src, která je vztažena k objektu obr. Tento objekt zastupuje jméno příslušného obrázku, které představuje parametr name tagu <img> v HTML kódu. Proměnná nazev zase představuje jméno volaného GIF souboru. Skript lze samozřejmě upravit i pro jiné formáty, jako je JPG nebo PNG. Nyní zbývá jen přidat příslušný HTML kód, který bude obsahovat obrázek a textové odkazy.

<img name=“ukazka“ width=“129″ height=“110″ border=“0″ src=“green.gif“ >
<a href=“gray.gif“ onMouseOver=“return change_image(ukazka,grey);“ onClick=“return false;“>šedá</a> 
<a href=“green.gif“ onMouseOver=“return change_image(ukazka,green);“ onClick=“return false;“>zelená</a> 
<a href=“red.gif“ onMouseOver=“return change_image(ukazka,red);“ onClick=“return false;“>červená</a> 
<a href=“blue.gif“ onMouseOver=“return change_image(ukazka,blue);“ onClick=“return false;“>modrá</a>


Údaje v závorkách funkce change_image() udává jednak parametr name měněného obrázku a jméno volaného souboru (bez koncovky), který bude po přejetí myší po textovém odkazu zobrazen. Zde je ukázka našeho příkladu:


šedá  zelená  červená  modrá

Prohlížeče bez podpory JavaScriptu ignorují tento skript a po kliknutí na odkaz zobrazí obrázek, jehož cesta je uvedena v parametru HREF tagu <a>, zatímco v prohlížečích s podporou klientských skriptů se po kliknutí nic neděje: to je zajištěno příkazem return false, který je volán metodou onClick.

Kód lze samozřejmě upravit tak, aby se např. po kliknutí objevil větší obrázek ve zvláštním okně. Zde je k dispozici celý zdrojový kód příkladu včetně obrázků ke stažení (20 kb).

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

2 Příspěvků v diskuzi

Odpovědět