Animované rolovery

Tato technika dodá roloverům další vzrušující rozměr. Co když například vytvoříte klobouk, a když přes něj divák přejede, vyleze z něj králík a řekne vám NEBUDIT? Jak vytvoříte animovaný rolover:

1. Vyrobte originální animovaný GIF
Animovaný rolover se skládá z pozadí animace a animovaného GIFu . Můžete vyrobit také cyklickou animaci.

2. Vytvořte JavaScript rolover efekt
Do hlavičky www stránky napište obdobný kód JavaScriptu:

< SCRIPT language="JavaScript">
//< !-
if (document.images){
imgoff=new Image();
imgoff.src="pozadí_animace.gif"
imgon=new Image();
imgon.src="animovaný.gif"
}
function On(){
if (document.images){
document['jméno_obrázku'].src=imgon.src;
}
}
function Off(){
if (document.images){
document['jméno_obrázku'].src=imgoff.src;
}
}
//->
< /SCRIPT>

3. Použijte Java Script v odkazu < A HREF= ...>

< A HREF= ... 
onMouseOver="On();status='Text ve st. ř.'; return true" 
onMouseOut="Off();status=''">
< IMG name="jméno_obrázku" 
width=šířka_obrázku 
height=výška_obrázku 
src="pozadí_animace.gif" border=0>
Text nebo obrázek odkazu< /A>
Příklad - vytvoření animovaného roloveru ze začátku této stránky:
V hlavičce:
< SCRIPT language="JavaScript">
//< !-
if (document.images){
imgoff=new Image();
imgoff.src="zajic1.gif"
imgon=new Image();
imgon.src="zajicani.gif"
}
function On(){
if (document.images){
document['anim'].src = imgon.src;
}
}
function Off(){
if (document.images){
document['anim'].src =imgoff.src;
}
}
//->
< /SCRIPT>

V odkazu:
< A HREF="prac18.htm" 
onMouseOver="On();status='Tvorba roloverů'; return true" 
onMouseOut="Off();status=''">
< IMG name="anim" width=50 height=50 src="zajic1.gif" border=0>
roloverům< /A>
Začátek
Další
Předchozí
Zpět