![]() |
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 |
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()">