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
a
,
,
,
, 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:
< SCRIPT language="JavaScript"> //< !- imgon1=new Image(); imgon1.src="1._rozsvícený_rolover.gif" imgond1=new Image(); imgond1.src="1._rozsvícený_druhý_rolover.gif" ... imgonN=new Image(); imgonN.src="N._rozsvícený_rolover.gif" imgondN=new Image(); imgondN.src="N._rozsvícený_druhý_rolover.gif" imgon1=new Image(); imgoff1=new Image(); imgoff1.src="1._zhasnutý_rolover.gif" imgoffd1=new Image(); imgoffd1.src="1._zhasnutý_druhý_rolover.gif" ... imgoffN=new Image(); imgoffN.src="N._zhasnutý_rolover.gif" imgoffdN=new Image(); imgoffdN.src="N._zhasnutý_druhý_rolover.gif" function imgOn(number){ document['r'+number].src = eval('imgon'+number+'.src'); document['rd'+number].src = eval('imgond'+number+'.src'); } function imgOff(number){ document['r'+number].src = eval('imgoff'+number+'.src'); document['rd'+number].src = eval('imgoffd'+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>
< IMG name="rdčíslo_roloveru"
width=šířka_roloveru height=výška_roloveru
src="jméno_souboru_s_druhým_zhasnutým_roloverem.gif" border=0>
Text nebo obrázek odkazu< /A>
Příklad - vytvoření vícenásobných roloverů, které jsou na konci této stránky:
V hlavičce: < SCRIPT language="JavaScript"> //< !- imgon1=new Image(); imgon1.src="rolonvnr.gif" imgond1=new Image(); imgond1.src="sipka.gif" imgon2=new Image(); imgon2.src="rolonvnr.gif" imgond2=new Image(); imgond2.src="sipkap.gif" imgon3=new Image(); imgon3.src="rolonvnr.gif" imgond3=new Image(); imgond3.src="sipkal.gif" imgoff1=new Image(); imgoff1.src="1x1.gif" imgoffd1=new Image(); imgoffd1.src="1x1.gif" imgoff2=new Image(); imgoff2.src="1x1.gif" imgoffd2=new Image(); imgoffd2.src="1x1.gif" imgoff3=new Image(); imgoff3.src="1x1.gif" imgoffd3=new Image(); imgoffd3.src="1x1.gif" } function imgOn(number){ if (document.images && (br=="n4" || br=="e4")){ document['r'+number].src = eval('imgon'+number+'.src'); document['rd'+number].src = eval('imgond'+number+'.src'); } } function imgOff(number){ if (document.images && (br=="n4" || br=="e4")){ document['r'+number].src = eval('imgoff'+number+'.src'); document['rd'+number].src = eval('imgoffd'+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=20 height=20 src="1x1.gif" border=0> Začátek< /A> < IMG name="rd1" width=8 height=16 src="1x1.gif" border=0>< BR> < A HREF="prac19.htm" onMouseOver="imgOn(2);status='Další stránka'; return true" onMouseOut="imgOff(2);status=''"> < IMG name="r2" width=20 height=20 src="1x1.gif" border=0> Další< /A> < IMG name="rd2" width=16 height=8 src="1x1.gif" border=0>< BR> < A HREF="prac17.htm" onMouseOver="imgOn(3);status='Předchozí stránka'; return true" onMouseOut="imgOff(3);status=''"> < IMG name="r3" width=20 height=20 src="1x1.gif" border=0> Předchozí< /A> < IMG name="rd3" width=16 height=8 src="1x1.gif" border=0>< BR>