Následující skript jsem vytvořil jako náhradu běžícího textu, který pracuje pouze v IE. Pomocí absolutního pozicování a atributu hidden/visible můžete se zapojením JavaScriptu vytvořit reklamní proužek, který bude postupně nabízet vámi přednastavené texty.
Všechny uvedené texty budou absolutně pozicované do stejné pozice (sami si na stránce určíte vhodné místo) a jejich viditelnost bude skrytá. Pomocí Javascriptu pak uděláte cyklus, který vždy daný text (ve skutečnosti celý element DIV) nastaví na viditelný, po chvíli jej skryje a zviditelní následující text.
Příklad stránky s pěti střídajícími se texty:
<html>
<head>
<script language="JavaScript">
<!–
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name) { // tato funkce předá jméno objektu, s kterým je možno u daného browseru pracovat
if (document.getElementById) {
return document.getElementById(name).style;
}
else
if (document.all) {
return document.all[name].style;
}
else
if (document.layers) {
return document.layers[name];
}
}
function ap_showWaitMessage(div,flag) {
if (!DHTML)
return; // pokud browser nepodporuje funkce pozicování, ukonči
var x = ap_getObj(div);
x.visibility = (flag) ? ‚visible‘:’hidden‘ // přepni viditelnost objektu
if(! document.getElementById)
if(document.layers)
x.left=380; // ošetření browserů typu NN 4
}
stat=1 // výchozí hodnota viditelnosti
mess=4 // počet zobrazovaných zpráv – 1
start=0 // číslo první zobrazené zprávy
function ticker() {
if (start>mess) { // jsou-li již vyčerpány všechny zprávy, ukaž první zprávu
start=0;
}
ap_showWaitMessage(‚waitdiv’+start,stat);
if (stat!=0) { // pokud není status "skryto", nastav na skryto a po uplynutí timeout zprávu skryj
stat=0
setTimeout("ticker()",1800);
}
else { // pokud je status skryto, nastav na zobrazeno a po krátkém timeout zobraz následující zprávu
start+=1;
stat=1
setTimeout("ticker()",50);
}
}
onload=ticker; // aktivuj reklamní proužky po nahrání celé stránky
// –>
</script>
</head>
<body bgcolor="#ffffcc" >
<div ID="waitdiv0" style="position:absolute;left:380;top:280;visibility:hidden">Pečivo</div>
<div ID="waitdiv1" style="position:absolute;left:380;top:280;visibility:hidden">Ovoce</div>
<div ID="waitdiv2" style="position:absolute;left:380;top:280;visibility:hidden">Zelenina</div>
<div ID="waitdiv3" style="position:absolute;left:380;top:280;visibility:hidden">Maso, drůbež</div>
<div ID="waitdiv4" style="position:absolute;left:380;top:280;visibility:hidden">Mléko, sýry</div>
Zde bude obsah stránky…
</body>
</html> |
|
Pro plnohodnotné využití je dobré navrhnout design stránky tak, aby se pod textem proužků nemohl objevit text a stránka se tak stala nečitelnou. Styl písma proužků si již přizpůsobte svým potřebám, stejně jako vyjmutí definice stylů do externího souboru, které jsem pro přehlednost neuváděl. Uvedený skript pracuje ve většině nejpoužívanějších prohližečů – IE, NN a Opera.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
