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.

Rotace obrázků na www stránkách

30. prosince 1999
•
Martin Komárek

Související

V dnešním článku vám přinášíme JavaScript, který umožní automaticky obměňovat obrázky na vašich webových stránkách v nastaveném časovém intervalu. Skript lze využít s úspěchem nejen při rotaci reklamních bannerů, ale i v mnoha dalších případech…

Postup si vysvětlíme na jednoduchém příkladu. Necháme rotovat čtyři jednoduché obrázky. Po kliknutí na obrázek bude návštěvník přesměrován na stránku, která odpovídá zobrazenému obrázku.

Ukázka

V prvním kroku si nejprve nadefinujeme pole obrsrc a cesta. Do těchto proměnných zadáme URL jednotlivých obrázků (pole obrsrc) a URL stránek, kam po kliknutí bude návštěvník přesměrován (pole obrsrc). Celkový počet obrázků, které budou postupně zobrazovány zadáme pomocí proměnné pocet. Ještě zbývá doplnit časový interval, po jehož uplynutí dojde k výměně obrázku (proměnná doba, udává se v milisekundách).

V dalším kroku načteme obrázky do cache počítače. Tím bude zajištěno rychlé načítání obrázků při výměně, protože obrázky jsou již uloženy v počítači a nemusí být načítány z webového serveru. K tomu využijeme funkci new Image(). Kód, který vložíme do hlavičky dokumentu pak vypadá následovně:

<script language=“javascript“>
<!–
doba=5000;
pocet = 4;
rotator=0;
obrsrc = new array(pocet);
cesta =new array(pocet);
obrsrc[0]=“obrazek1.gif“; cesta[0]=“http://www.interval.cz“;
obrsrc[1]=“obrazek2.gif“; cesta[1]=“http://www.inshop.cz“;
obrsrc[2]=“obrazek3.gif“; cesta[2]=“http://www.zoner.cz“;
obrsrc[3]=“obrazek4.gif“; cesta[3]=“http://www.czechia.cz“;
obr = new array(pocet);
for (i=0; i < pocet; i++){
obr[i]= new image();
obr[i].src= obrsrc[i] }
//–
</script>


Dále vytvoříme funkci, která způsobí vlastní výměnu obrázku. Interval mezi jednotlivými výměnami obrázků nastavíme pomocí funkce setTimeout (funkce a interval v milisekundách).

function rotate() {
if (rotator==pocet) {rotator=0;}
document.images[„obraz“].src = obrsrc[rotator];
rotator = rotator + 1;
window.setTimeout(‚rotate();‘,doba);
}


Tuto funkci budeme volat ihned po načtení stránky. Proto do tagu <BODY> přidáme parametr onLoad a to následovně:

<body onLoad=“rotate();“>


HTML kód vlastního obrázku pak vypadá takto:

<a href=“http://www.interval.cz“ onclick=“return poslat();“>
<img name=“obraz“ src=“obrazek1.gif“ border=“0″ width=“150″ height=“150″></a>


Důležitý je především parametr name, pomocí kterého identifikujeme obrázek ve funkci rotate(). Po kliknutí na obrázek je volána funkce poslat(), která způsobí přesměrování uživatele na stránku odpovídající zobrazenému obrázku.

function poslat() {
window.location=cesta[rotator-1];
return false;
}


Pokud prohlížeč návštěvníka nepodporuje JavaScript, zobrazí se pouze obrázek nastavený v parametru src tagu <img>, a po kliknutí na obrázek bude přeměrován na adresu uvedenou v tagu anchor (<a>). Pro úplnost Vám na závěr ukážeme kompletní zdrojový kód našeho příkladu, který si můžete zkopírovat pro své vlastní potřeby:

<html>
<head>
<title>Rotace obrázků</title>
<script language=“javascript“>
<!–
doba=5000
pocet = 4
rotator=0
obrsrc = new Array(pocet)
cesta =new Array(pocet)
obrsrc[0]=“obrazek1.gif“; cesta[0]=“http://www.interval.cz“;
obrsrc[1]=“obrazek2.gif“; cesta[1]=“http://www.inshop.cz“;
obrsrc[2]=“obrazek3.gif“; cesta[2]=“http://www.zoner.cz“;
obrsrc[3]=“obrazek4.gif“; cesta[3]=“http://www.czechia.cz“;
obr = new Array(pocet);
for (i=0; i < pocet; i++){
obr[i]= new Image();
obr[i].src= obrsrc[i] }
function rotate() {
if (rotator==pocet) {rotator=0;}
document.images[„obraz“].src = obrsrc[rotator];
rotator = rotator + 1
window.setTimeout(‚rotate();‘,doba);
}
function poslat() {
window.location=cesta[rotator-1];
return false;
}
//–></script>
</head>
<body onLoad=“rotate();“>
<a href=“http://www.interval.cz“ onclick=“return poslat();“>
<img name=“obraz“ src=“obrazek1.gif“ border=“0″ width=“150″ height=“150″></a>
</body>
</html>

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 Tipy - triky při tvorbě HTML stránek 1.
Další článek Kurz HTML - tvorba tabulek 1.
Štítky: Články
Martin Komárek

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Luboš

    Zář 14, 2011 v 9:00

    Pokud se týká javascriptu, jsem naprostý začátečník. Proto se omlouvám, pokud je moje otázka příliš triviální. Nerozumím jedné věci. Píšete o načtení obrázků do cache, ale pak stejně používáte původní src.
    Nemělo by tam být správně
    document.images[„obraz“].src = obr[rotator].src;
    místo
    document.images[„obraz“].src = obrsrc[rotator]; ?

    Děkuji za objasnění.

    Odpovědět

Napsat komentář

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