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>