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.