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.

Změna obrázku při najetí kurzorem

12. listopadu 1999
•
Miroslav Kučera

Obsah

  1. Odkazy a zdroje

Související

Změna obrázku při najetí kurzorem myši může být dobrým zpestřením webové stránky. Článek vám poradí, jak to udělat pomocí JavaScriptu tak, že obrázky se změní hned při najetí kurzorem myši.

Defacto existují dva způsoby, jak výše zmíněný efekt vytvořit. Jeden je ten, že při najetí kurzorem myši na obrázek se teprve začne načítat z webu obrázek, který jej nahradí původní – nevýhody jsou zřejmé, taková sekundová prodleva mezi změnou obrázků je více než nepříjemná. Druhý způsob, který zde popíšeme, je ten, že obrázky se při načítání webové stránky načtou do cache a pak se odtud – při najetí kurzorem myši – okamžitě a bez viditelného zpoždění vyvolají.

Uvedený skript testuje, zda-li váš prohlížeč je Netscape Navigator 3.0 a vyšší nebo Internet Explorer 4.0 a vyšší. Pokud ano, změna obrázků při najetí kurzorem myši vám bude fungovat. Pokud máte starší verzi prohlížeče, obrázky se vám nebudou měnit, ale neobjeví se žádná chybová hláška, protože v takovém případě se provádění skriptu zastaví:

<script language=“JavaScript“>
<!–
function getAppVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == „Netscape“) && ( majorver >= 3 ) ) return 1;
if ( (appname == „Microsoft Internet Explorer“) && (majorver >= 4) ) return 1;
return 0;
}
function swtch(num, imgname) {
if (getAppVersion()) {
document[imgname].src = img[num].src;
}
}
imgsrc = new Array();
imgsrc[1] = „images/obrazek1.gif“;
imgsrc[2] = „images/obrazek2.gif“;
imgsrc[3] = „images/obrazek3.gif“;
imgsrc[4] = „images/obrazek4.gif“;
if (getAppVersion()) {
img = new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i] = new Image();
img[i].src = imgsrc[i];
}
}
//–>
</script>

Aby jste dosáhli kýženého efektu, doplňte k tagu <A HREF…> parametry OnMouseOver a OnMouseOut podle níže uvedeného příkladu. Parametr onMouseOver slouží k tomu, aby specifikoval funkci, která se zavolá při najetí kurzoru myši. Ta načte obrázek s pořadovým číslem 2 nebo 4. Parametr onMouseOut funguje přesně opačně – při oddálení myši načte původní obrázek, který má v našem příkladu pořadové číslo 1 či 3.

<a href=“stranka1.htm“ onMouseOver=“swtch(‚2′,’obrazek1‘)“ onMouseOut=“swtch(‚1′,’obrazek1‘)“><IMG SRC=“obrazek1.gif“ name=“obrazek1″ width=100 height=20 alt=“Obrázek1 – stranka1.htm“ border=0></a>
<a href=“stranka2.htm“ onMouseOver=“swtch(‚4′,’obrazek2‘)“ onMouseOut=“swtch(‚3′,’obrazek2‘)“> <IMG SRC=“obrazek3.gif“ name=“obrazek2″ width=100 height=20 alt=“Obrázek3 – stranka2.htm“ border=0></a>

Výsledek vypadá následovně:

Obrázek1 - Odskok na Interval.czObrázek3 - Odskok na tento článek

Počet obrázků můžete samozřejmě libovolně definovat, ale nezapomeňte dát každému obrázku jiné pořadové číslo. Samotný příklad je vytvořen tak, že obrázky, které se poprvé objeví při načtení stránky nebo při oddálení kurzoru myši, mají lichá čísla (např: imgsrc[1] = „obrazek1.gif“;). Sudá čísla mají obrázky, které nahrazují původní obrázky při najetí kurzoru myši.

Odkazy a zdroje

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 Third Voice: Poznámky na webových stránkách
Další článek Odskoky na stránky pomocí radio button
Štítky: Články
Miroslav Kučera

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

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