Reklamní proužek pomocí CSS

28. února 2002

•

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.