Reklamní proužek pomocí CSS

    0

    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.

    Žádný příspěvek v diskuzi

    Odpovědět