Java Script rolovery I

Tato stránka popisuje tvorbu roloverů stejného typu na jedné www stránkce. Originální termín rollover (aktivita objektu při přejíždění myší) je používán v jazykově zjednodušeném tvaru rolover.
Tato technika se používá k
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
Jak vytvořit www stránku se stejnými rolovery:

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>

Začátek
Další
Zpět