Senzitivní obrázková mapa s rolovery

Touto technikou:
si zjednodušíte zprávu obrázků - namísto opakovaných skriptů pro vícero obrázků se budete potýkat pouze s jedním skriptem obrázkové mapy
se vyhnete nutnosti rozvrhování mnoha tabulkových buněk
Jak vytvoříte senzitivní obrázkovou mapu s rolovery:

1. Vytvořte originální senzitivné mapu a její modifikace (rolovery)
Nejprve si vyrobte obrázek, který použizete pro neaktivní senzitivní mapu . Dále vyrobte všechny potřebné rolovery. Neaktivní obrázek vždy na nějakém místě zvýrazněte nebo doplňte textem a získáte jeden rolover .

2. Vytvořte JavaScript rolover efekt
Do hlavičky www stránky napište obdobný kód JavaScriptu:

< SCRIPT language="JavaScript">
//< !-
if (document.images){
imgoff=new Image();
imgoff.src="soubor_s_neaktivní_mapou.gif"
imgon1=new Image();
imgon1.src="soubor_s_1._roloverem.gif"
imgon2=new Image();
imgon2.src="soubor_s_2._roloverem.gif"
imgon3=new Image();
imgon3.src="soubor_s_3._roloverem.gif"
// atd. ...
}
function On(number){
if (document.images){
document['map'].src = eval('imgon'+number+'.src');
}
}
function Off(){
if (document.images){
document['map'].src =imgoff.src;
}
}
//->
< /SCRIPT>

3. Pojmenujte obrázek v < IMG>
Pojmenujte obrázek, který tvoří senzitivní obrázkovou mapu: < IMG SRC="soubor_s_neaktivní_mapou.gif" USEMAP="#MAPA" BORDER=0 ALIGN=middle NAME="map">

4. Použijte svůj skript v definici obrázkové mapy < AREA>
Do značky < AREA> zahrňte tyto řádky:

< AREA ...   
onMouseOver="On(číslo_roloveru); return true" 
onMouseOut="Off()">
Příklad - vytvoření senzitivní mapy s rolovery, která je na konci této stránky:
V hlavičce:
< SCRIPT language="JavaScript">
//< !-
if (document.images){
imgoff=new Image();
imgoff.src="mapa.gif"
imgon1=new Image();
imgon1.src="mapaon1.gif"
imgon2=new Image();
imgon2.src="mapaon2.gif"
imgon3=new Image();
imgon3.src="mapaon3.gif"
}
function On(number){
if (document.images){
document['map'].src = eval('imgon'+number+'.src');
}
}
function Off(){
if (document.images){
document['map'].src =imgoff.src;
}
}
//->
< /SCRIPT>

V obrázku:
< IMG SRC="mapa.gif" alt="SOM" USEMAP="#MAPA" BORDER=0
 ALIGN=middle name="map">
 
V definicích oblastí mapy:
< AREA SHAPE=circle coords="58,43,37" HREF="prac4.htm"   
onMouseOver="On(1); return true" 
onMouseOut="Off()">
< AREA SHAPE=rect coords="16,100,106,187" HREF="#z" 
onMouseOver="On(2); return true" 
onMouseOut="Off()">
< AREA SHAPE=poly coords="159,199,184,163,175,149,195,118,
164,90,192,54,168,38,189,3,158,1,121,45,143,67,124,102,154,125,
125,166" HREF="prac2.htm"  
onMouseOver="On(3); return true" 
onMouseOut="Off()">
SOM
Začátek
Předchozí
Zpět