.
 

Navigace

Hlavní menu

 

Submenu

 

DHTML transformace a obrázky

DHTML transformace a filtry, dostupné v prohlížečích MSIE 4+, 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.

Do stránky s obrázkem doplníme skript, který nejprve ověří dostupnost filtru. Pokud jde o prohlížeč podporující filtry, nastavíme ihned průhlednost obrázku na maximum, takže obrázek nebude vidět. Po natažení stránky (událost onload) se aktivuje funkce, která postupně mění průhlednost obrázku tak, že se obrázek pozvolna objevuje (viz ukázka).

Stránka s příkladem:

<html>
<head>
<title>Objevující se obrázek</title>
</head>
<body>
<img src="logo.gif" width="368" height="118" border="0" id="fadeimage" />  // v parametru id nutné jméno obrázku
<script language="JavaScript">
<!--
var ActOpacity = 0;

function NextOpacity(){
  fadeimage.style.filter='alpha(opacity='+ActOpacity+', enabled=1)';
  ActOpacity = ActOpacity + 2; // konstantou je možné ovlivnit v kolika stupních se obrázek objeví
  if (ActOpacity<100) {
    setTimeout('NextOpacity()',20); // konstantou je možné ovlivnit rychlost objevení obrázku
  }
}

if (navigator.appName=='Microsoft Internet Explorer') {
  fadeimage.style.filter='alpha(opacity=0, enabled=1)' // nastavit obrázek na průhledný (neviditelný)
  onload=NextOpacity; // po natahování stránky zahájit "objevování"
}
// -->
</script>
</body>
</html>

Aplikace je velmi jednoduchá, nesmíme ale zapomenout pojmenovat obrázek v atributu id a toto jméno pak použít ve funkcích pro filtr, jinak filtr nebude vědět, s kterým obrázkem pracovat a aplikace nebude funkční.

Související články:
Vlastné roletové menu na web stránke
JavaScriptové bannery I.

Růžička, Pavel (25. 5. 2002)
(spolupracovník redakce magazínu Interval.cz)

Ulož odkaz na: del.icio.us | jagg.cz | linkuj.cz | vybrali.sme.sk | zalinkuj.cz. Děkujeme!
DHTML transformace a obrázky (diskuse)
2002-05-25 07:45:55Pavel HyldebrantStandardy
2002-05-25 11:10:22Marek Soldát..Standardy
2002-05-26 19:48:34Petr NovakParaelni beh scriptu
2002-05-27 11:56:34tpChyba
2002-05-28 11:59:22Pavel Růžička..Chyba
2002-05-30 14:11:46Marekjiný příklad
2002-08-03 16:01:00F!nsvice obrazku
2003-05-26 08:01:54vincentno houby
2007-07-13 14:42:27Jan TechlFirefox ?
2007-07-14 13:32:21Pavel Růžička..Firefox ?

Pravý sloupek

Knižní tip

Adobe Premiere 6.5: oficiální výukový kurz

obálka

Nejčtenější

Info servis

Diskuzní kotel

 
 
 
Inzerce na Interval.cz  |  Redakce Interval.cz  |  Hledáme nové autory
. ISSN 1212-8651 .
© Zoner software, s.r.o., všechna práva vyhrazena, tento server dodržuje právní předpisy o ochraně osobních údajů.