Cómo actualizar una imagen HTML Mapa con JavaScript

Los mapas de imagen son estructuras HTML utilizadas para hacer ciertas regiones de las imágenes en su página web en hipervínculos puede hacer clic. Un mapa de imagen se adjunta a una imagen a través del atributo "usemap"; como la mayoría de los componentes del modelo de objetos de documento HTML (DOM), este atributo se puede acceder y cambiar sobre la marcha con el código JavaScript para actualizar el mapa de imagen adjunta a una imagen.

Instrucciones

1 Inserte el siguiente código JavaScript entre las etiquetas "cabeza" de su documento HTML:

<Script type = "text / javascript">

función swapMap (id, mapa) {

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

}

</ Script>

2 Añadir una imagen y un mapa de imágenes en el cuerpo del documento HTML con el siguiente código:

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

<Map name = "map1">

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

</ Map>

Cambie el atributo "src" de la etiqueta "img" para que coincida con la URL de su imagen. El "atributos" coords de la etiqueta "zona" "forma" y se utilizan para hacer la mitad izquierda de la imagen se puede hacer clic. El atributo "href" se puede usar para enlazar a otras páginas, al igual que con los elementos de anclaje.

3 Añadir otro mapa de imagen para el cuerpo, y un par de botones que llaman a la función "swapMap" para actualizar el mapa de imagen adjunta a la imagen:

<Map name = "map2">

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

</ Map>

<Input type = "button" value = "Uso Mapa 1" onclick = "swapMap (" imagen1 "," map1 '); " />

<Input type = "button" value = "Uso Mapa 2" onclick = "swapMap (" imagen1 "," map2 '); " />

Este mapa de imagen simplemente cubre la mitad derecha de la imagen en lugar de la izquierda. Los botones llaman a la función "swapMap" que ha definido en la sección "cabeza", suministrando el único atributo "id" de la imagen de ser afectados y el nombre del mapa para asignar. Llamar "swapMap" dentro de otras rutinas JavaScript o mediante el uso de controladores de eventos para producir el comportamiento específico que desea.

4 Guarde la página y lo carga en un navegador Web. Pase el cursor del ratón sobre la mitad izquierda de la imagen y observe que éste cambia para indicar la región se puede hacer clic. Haga clic en el botón "Usar el mapa 2" y ver que la mitad derecha de la imagen es ahora se puede hacer clic en su lugar; el mapa de imagen ha sido actualizada.