Vícenásobné rolovery

Pomocí vícenásobných roloverů zvýrazníte více grafik při přechodu přes jednu. na jedné www stránkce.
Jak vytvořit vícenásobné 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 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>

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