Le mappe immagine sono strutture HTML utilizzati per fare alcune regioni delle immagini nella pagina Web in collegamenti ipertestuali cliccabili. Una mappa immagine è collegato a un'immagine tramite l'attributo "usemap"; come la maggior parte dei componenti del Document Object Model HTML (DOM), questo attributo è possibile accedere e modificare al volo con codice JavaScript per aggiornare la mappa immagine allegata a un'immagine.

istruzione

1 Inserire il seguente codice JavaScript tra i tag "testa" del documento HTML:

<Script type = "text / javascript">

Funzione swapMap (id, mappa) {

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

}

</ Script>

2 Aggiungere un'immagine e una mappa immagine per il corpo del documento HTML con il seguente codice:

<Img id = larghezza "immagine1" = "500" height = "500" usemap = "# map1" />

<Nome della mappa = "mappa1">

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

</ Map>

Modificare l'attributo "src" del tag "img" per abbinare l'URL del tuo immagine. La "forma" e "coords" attributi del tag "area" sono usati per fare la metà sinistra del cliccabile dell'immagine. L'attributo "href" può essere utilizzato per collegare ad altre pagine, proprio come con gli elementi di ancoraggio.

3 Aggiungere un'altra mappa immagine per il corpo, e un paio di pulsanti che invocano la funzione "swapMap" per aggiornare la mappa immagine allegata alla vostra immagine:

<Nome della mappa = "MAP2">

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

</ Map>

<Input type = valore "pulsante" = "Usa Mappa 1" onclick = "swapMap ( 'immagine 1', 'map1');" />

<Input type = valore "pulsante" = "Usa Mappa 2" onclick = "swapMap ( 'immagine 1', 'MAP2');" />

Questa mappa immagine copre semplicemente la metà destra dell'immagine anziché sinistra. I tasti di chiamata della funzione "swapMap" definito nella sezione "testa", fornendo l'attributo unico "id" dell'immagine di essere colpiti e il nome della mappa da assegnare. Chiamata "swapMap" all'interno di altre routine JavaScript oppure utilizzando gestori di eventi per produrre il comportamento specifico che si desidera.

4 Salvare la pagina e caricare in un browser Web. Far passare il cursore del mouse sopra la parte sinistra dell'immagine, e si noti che cambia per indicare la regione è cliccabile. Fare clic sul pulsante "Usa Mappa 2" e vedere che la metà destra dell'immagine è ora cliccabile invece; la mappa immagine è stata aggiornata.