ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Prohlížečka obrázků

16. listopadu 1999
•
Martin Komárek

Související

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.

Předchozí článek Odskoky na stránky pomocí radio button
Další článek Jak prohledávat Internet z webových stránek?
Štítky: Články
Martin Komárek

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. vacziik

    Kvě 22, 2010 v 15:55

    změny obrázku v uvedeném příkladu nefungují

    Odpovědět

  2. Miroslav Kučera

    Kvě 22, 2010 v 20:33

    vacziik: a proc myslite, ze tomu tak je? :-))

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *