![]() |
poskytnutí bezprostřední zpětné vazby - dáte uživatelům na vědomí, že odkaz je aktivní |
![]() |
vylepšení navigace stránky - rolovery vynucují kliknutí |
![]() |
oživení stránky - oživí typické hypertextové odkazy nebo tiché obrázky |
1. Navrhněte své originální rolovery - Ve Photo Shopu, Paint Shop Pro 6 nebo
jiném grafickém editoru vytvořte dva obrázky 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čte všechny obrázky pro rolovery //- do vyrovnávací paměti imgon=new Image(); imgon.src="jméno_souboru_s_rozsvíceným_roloverem.gif"; imgoff=new Image(); imgoff.src="jméno_souboru_se_zhasnutým_roloverem.gif"; } function imgOn(number){ // -funkce, která zobrazí // -na www stránce rozsvícený rolover if (document.images){ document['r'+number].src = imgon.src; } } function imgOff(number){ // -funkce, která zobrazí // -na www stránce zhasnutý rolover if (document.images){ document['r'+number].src = imgoff.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){ imgon=new Image(); imgon.src="rolovon.gif" imgoff=new Image(); imgoff.src="rolovoff.gif" } function imgOn(number){ if (document.images){ document['r'+number].src = imgon.src; } } function imgOff(number){ if (document.images){ document['r'+number].src = imgoff.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="rolovoff.gif" border=0> Začátek< /A>
< A HREF="prac18.htm" onMouseOver="imgOn(2);status='Další stránka'; return true" onMouseOut="imgOff(2);status=' ' " >< IMG name="r2" width=15 height=15 src="rolovoff.gif" border=0> Další< /A>
< A HREF="prac16.htm" onMouseOver="imgOn(3);status='Předchozí stránka'; return true" onMouseOut="imgOff(3);status=' ' " >< IMG name="r3" width=15 height=15 src="rolovoff.gif" border=0> Předchozí< /A>