Java Script rolovery II

Tato stránka popisuje tvorbu různých roloverů na jedné www stránkce.
Jak vytvořit www stránku s různými rolovery:

1. Navrhněte své originální rolovery - Ve Photo Shopu, Paint Shop Pro 6 nebo jiném grafickém editoru vytvořte dvojice roloverů stejných rozměrů. Například , , , , kde první obrázek představuje neaktivní(zhasnutý) rolover a druhý pak aktivní (rozsvícený)rolover.

2. Vytvořte rolover efet v JavaScriptu - mezi značky < HEAD > < /HEAD > napište tento (vámi modifikovaný) Java Script (texty za // - jsou vysvětlující poznámky, ty do scriptu nepište; mezi < > a textem nedělejte mezery):

< SCRIPT language="JavaScript" >
//< !-// -skryje Java script před staršími prohlížeči     	 
if (document.images){
// -načtení všech roloverů
//- do vyrovnávací paměti
imgon1=new Image();
imgon1.src="1._soubor_s_rozsvíceným_roloverem.gif"
imgon2=new Image();
imgon2.src="2._soubor_s_rozsvíceným_roloverem.gif"
imgon3=new Image();
imgon3.src="3._soubor_s_rozsvíceným_roloverem.gif"
imgon4=new Image();
imgon4.src="4._soubor_s_rozsvíceným_roloverem.gif"
imgoff1=new Image();
imgoff1.src="1._soubor_se_zhasnutým_roloverem.gif"
imgoff2=new Image();
imgoff2.src="2._soubor_se_zhasnutým_roloverem.gif"
imgoff3=new Image();
imgoff3.src="3._soubor_se_zhasnutým_roloverem.gif"
imgoff4=new Image();
imgoff4.src="4._soubor_se_zhasnutým_roloverem.gif"
// - atd. ...
}
function imgOn(number){
// -funkce, která zobrazí 
// -na www stránce rozsvícený rolover 
if (document.images){
document['r'+number].src = eval('imgon'+number+'.src');
}
}
function imgOff(number){
// -funkce, která zobrazí 
// -na www stránce zhasnutý rolover 
if (document.images){
document['r'+number].src = eval('imgoff'+number+'.src');
}
}
//->
< /SCRIPT >

3. Použijte Java Script v odkazu < A HREF= ... > - použijte následující formu odkazu:
< A HREF="soubor.html" onMouseOver="imgOn(číslo_roloveru); status='Text_ve_stavovém_řádku_prohlížeče'; return true" onMouseOut="imgOff(číslo_roloveru); status=''" > < IMG name="rčíslo_roloveru" width=šířka_roloveru height=výška_roloveru src="jméno_souboru_se_zhasnutým_roloverem.gif" border=0> Text nebo obrázek odkazu< /A> Příklad - vytvoření roloverů, které jsou na konci této stránky:

V hlavičce:
< SCRIPT language="JavaScript">
//< !-
if (document.images){
imgon1=new Image();
imgon1.src="rolon1.gif"
imgon2=new Image();
imgon2.src="rolon2.gif"
imgon3=new Image();
imgon3.src="rolon3.gif"
imgon4=new Image();
imgon4.src="rolon4.gif"
imgoff1=new Image();
imgoff1.src="roloff1.gif"
imgoff2=new Image();
imgoff2.src="roloff2.gif"
imgoff3=new Image();
imgoff3.src="roloff3.gif"
imgoff4=new Image();
imgoff4.src="roloff4.gif"
}
function imgOn(number){
if (document.images){
document['r'+number].src = eval('imgon'+number+'.src');
}
}
function imgOff(number){
if (document.images){
document['r'+number].src = eval('imgoff'+number+'.src');
}
}
//->
< /SCRIPT>

V odkazech: < A HREF="#Z" onMouseOver="imgOn(1);status='Na začátek stránky'; return true" onMouseOut="imgOff(1); status=' ' " >< IMG name="r1" width=15 height=15 src="roloff1.gif" border=0> Začátek< /A>
< A HREF="r3.htm" onMouseOver="imgOn(2);status='Další stránka'; return true" onMouseOut="imgOff(2);status=' ' " >< IMG name="r2" width=15 height=15 src="roloff2.gif" border=0> Další< /A>
< A HREF="r1.htm" onMouseOver="imgOn(3);status='Předchozí stránka'; return true" onMouseOut="imgOff(3);status=' ' " >< IMG name="r3" width=15 height=15 src="roloff3.gif" border=0> Předchozí< /A> < A HREF="obsah.htm" onMouseOver="imgOn(4);status='Obsah'; return true" onMouseOut="imgOff(4);status=' ' " >< IMG name="r4" width=15 height=15 src="roloff4.gif" border=0> Zpět< /A>

Začátek
Další
Předchozí
Zpět