Hvordan oppdaterer en HTML Image Map område med Javascript

Bildekart er HTML-strukturer som brukes til å gjøre visse regioner av bilder på websiden til klikkbare linker. Et bildekart er vedlagt et bilde via "usemap" attributt; som de fleste komponenter i HTML Document Object Model (DOM), kan dette attributtet nås og endret på fly med Javascript-kode for å oppdatere bildekart vedlagt et bilde.

Bruksanvisning

1 Sett inn følgende Javascript-kode mellom "hodet" kodene i HTML-dokumentet:

<Script type = "text / javascript">

funksjon swapMap (id, kart) {

document.getElementById(id).useMap='#'+map;

}

</ Script>

2 Legg et bilde og et bilde kartet til kroppen av HTML-dokument med følgende kode:

<Img id = "image1" width = "500" height = "500" usemap = "# map1" />

<Map name = "map1">

<Area shape = "rect" coords = "0,0,250,500" href = "#" />

</ Kart>

Endre "src" egenskap av "img" kode for å matche din bildets nettadresse. Den "form" og "coords" attributtene "området" tag brukes til å lage den venstre halvdelen av bildet klikkbare. Den "href" attributtet kan brukes til å koble til andre sider, akkurat som med anker elementer.

3 Legg til en annen bildekart til kroppen, og et par knapper som påberope seg "swapMap" -funksjonen for å oppdatere bildekart knyttet til bildet ditt:

<Map name = "map2">

<Area shape = "rect" coords = "250,0,500,500" href = "#" />

</ Kart>

<Input type = "button" value = "Bruk 1" onclick = "swapMap ( 'image1', 'map1');" />

<Input type = "button" value = "Bruk Map 2" onclick = "swapMap ( 'image1', 'map2');" />

Dette bildet kartet dekker bare den høyre halvdel av bildet i stedet for til venstre. Knappene kaller "swapMap" -funksjonen du definerte i "head" -seksjonen, leverer den unike "id" attributt av bildet til å bli påvirket, og navnet på kartet for å tildele. Ring "swapMap" innenfor andre Javascript rutiner eller ved hjelp av hendelsesbehandlinger for å produsere den spesifikke atferden du ønsker.

4 Lagre siden og legg den i en nettleser. Pass musepekeren over den venstre halvdelen av bildet, og merker at den endres for å indikere regionen er klikkbare. Klikk på "Bruk Map 2" knappen og se at høyre halvdel av bildet er nå klikkbar i stedet; kartet bildet er uthvilt.