DHTML transformace a obrázky

DHTML transformace a filtry, které jsou dnes částečně dostupné ve všech prohlížečích, většina autorů stále ještě nedocenila. Přitom je můžeme použít i pro vytvoření efektního obrázku na titulní stránce, aniž bychom se museli uchylovat k Flashi nebo jiným pomocným metodám.

V našem skriptu využijeme filtr opacity pro postupnou změnu průhlednosti obrázku (o filtrech jsme již psali i v článcích o menu a o JavaScriptových bannerech). Postupnou změnou průhlednosti se tak obrázek jakoby „zjeví“. Po natažení obrázku se na jeho událost onload aktivuje funkce, která postupně mění průhlednost obrázku tak, že se obrázek pozvolna objevuje (viz ukázka).

Skript je poměrně jednoduchý – jeho úkolem je změnit průhlednost obrázku ze 100% (neviditelný obrázek) na 0% (plně viditelný obrázek). Budeme se muset také popasovat s odlišnou podporou filtrů v prohlížečích. Naštěstí je rozdíl jen mezi podporou prohlížeče Internet Explorer a ostatními – ty filtr buď nepodporují vůbec nebo jim vyhovuje stejná syntaxe (FireFox, Opera, Safari).

Problém s kompatibilitou při použití filtrů nespočívá jen v syntaxi, rozdíl je i v hodnotě průhlednosti. Internet Explorer očekává hodnotu v procentech, ostatní prohlížeče ji očekávají v rozmezí od 0 do 1. Pokud budeme počítat v procentech, pak stačí procenta pro IE prostě vydělit 100.

Příklad nastavení 70% průhlednosti pro Internet Explorer:

fimageObj.style.filter = ‚alpha(opacity=70)‘;

Příklad nastavení 70% průhlednosti pro prohlížeče FireFox, Opera a Safari:

fimageObj.style.opacity = .7;

Stránka s příkladem:

<script type=“text/javascript“>
  <!– <![CDATA[
  var ActOpacity = 0; // základní průhlednost – obrázek průhledný (neviditelný)
  var ImgOpacity; // pomocná proměnná pro objekt obrázku
  function NextOpacity(objImage)
  {
    if (objImage.style.opacity != null) // průhlednost pro ne-IE prohlížeče
      objImage.style.opacity = ActOpacity/100;
    else if (objImage.style.filter != null)  // průhlednost pro IE
      objImage.style.filter = „alpha(opacity=“+ActOpacity+“)“;
    ActOpacity = ActOpacity+4; // konstantou je možné ovlivnit v kolika stupních se obrázek objeví
    if (ActOpacity <= 100)
    {
      ImgOpacity = objImage;
      setTimeout(‚NextOpacity(ImgOpacity)‘,5); // konstantou je možné ovlivnit rychlost objevení obrázku
    }
  }
  //]]> –>
</script>
<div>
   // na onload se zavolá „objevení“ obrázku – předává se odkaz na objekt obrázku (this)
  <img id=“fadeimage“ src=“logo.gif“ width=“368″ height=“118″ border=“0″ onload=“NextOpacity(this);“ />
<div>

A ještě ukázka možnosti nastavit průhlednost pomocí CSS – opět 70% průhlednost, první řádek je pro nonIE prohlížeče, druhý řádek „zabere“ pro IE:

.imgOpacity
{
  opacity: .7;
  filter: alpha(opacity=70);
};

Nakonec mohu snad jen dodat, že jednoduchou úpravou skriptu docílíme namísto „zjevení“ obrázku jeho postupné slábnutí (mizení). Nejsme omezeni ani na obrázek – průhlednost můžeme takto nastavovat libovolnému elementu (například nějaké nápovědní bublině), ale také třeba celé stránce – vždy je ovšem potřeba zvážit, jaký užitek použití takového skriptu přinese uživateli.

Pozn. red.: Tento článek vyšel poprvé 25. 5. 2002. Původní verze článku a k němu vedené diskuse jsou vám k dispozici v ZIP archivech.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.