Os voy a mostrar como crear un mapa de imagen, es decir, una imagen en la que puedes mapear una serie de puntos o formas para poderlos enlazar a las webs o zonas que desees.

El mapa de imágenes se realiza mediante HTML. Pero un mapa de imagen en HTML solo funciona con una resolución de imagen con la que la crees, es decir, si hago un mapa para una imagen de 600×400 solo funcionará con esas dimensiones, si reduzco la ventana del navegador, al ser diseños responsive o adaptables, la imagen cambia de tamaño y ya no funcionará el mapa de imagen.

Para solucionar esto, entra en juego JavaScript y jQuery. Por lo que en necesario incluir las librerías jQuery y una librería especia de jQuery llamada jQuery-rwdImageMaps.

Decir que por defecto los WordPress ya traen incluido las librería de jQuery por lo que solo será necesario incluir las de jQuery-rwdImageMaps jQuery-rwdImageMaps. Aun que a mi, para que me funcionara, tube que actualizar las librerías de jQuery que me traía por defecto el WordPress (Mediante el plugin jQuery Updater se hace de una manera muy facil).

Acá dejo un ejemplo y debajo el código

 
Caceres Virtual
 

Mapa Caceres

Pulsar para acceder a Conjunto histórico Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Ciudad de Coria Pulsar para acceder a Puente Romano Pulsar para acceder a Iglesia de Santa Maróa de Almocovar Pulsar para acceder a Ex-Convento de San Benito Pulsar para acceder a Barrio Gótico e Iglesia Nuestra Señora de Roncamador Pulsar para acceder a Conjunto de Dólmenes Pulsar para acceder a Iglesia de Santa Maria la Mayor de la Asunción Pulsar para acceder a Iglesia de Nuestra Señora de la Asunción Pulsar para acceder a Convento de San Antonio Pulsar para acceder a Puente Romano de Alconétar Pulsar para acceder a Edificio el Ratero Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Castillo del Mayoralgo Pulsar para acceder a Iglesia Santa Lucía del Trampal Pulsar para acceder a Iglesia de San Salvador Pulsar para acceder a Castillo Pulsar para acceder a Conjunto Urbano Pulsar para acceder a Iglesia del Convento de los Agustinos Pulsar para acceder a Iglesia de la Vera Cruz Pulsar para acceder a El Humilladero Pulsar para acceder a Conjunto Histórico Artistico Pulsar para acceder a Ruinas Romanas de Talavera la Vieja Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Conjunto Histórico de la Villa de Granadilla Pulsar para acceder a Puente Romano de Cáparra Pulsar para acceder a Ciudad Romana de Cáparra Pulsar para acceder a Balneario de Baños de Montemayor Pulsar para acceder a Palacio de Sotofermoso Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Villa de Garganta la Olla Pulsar para acceder a Piornal Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Iglesia de Santa María Pulsar para acceder a Monasterio de Yuste Pulsar para acceder a Cuacos de Yuste Pulsar para acceder a Conjunto Histórico Pulsar para acceder a Conjunto Histórico


Codigo HTML

Recomiendo añadir antes la etiqueta img que la etiqueta map

Código JavaScript y jQuery

https://davidddp.com/wp-content/uploads/2015/05/Mapa_500x9131-620x340.jpghttps://davidddp.com/wp-content/uploads/2015/05/Mapa_500x9131-150x150.jpgDavid Diaz ParedesWebHTML,javascript,mapa html,mapa imagen
Os voy a mostrar como crear un mapa de imagen, es decir, una imagen en la que puedes mapear una serie de puntos o formas para poderlos enlazar a las webs o zonas que desees. El mapa de imágenes se realiza mediante HTML. Pero un mapa de imagen en HTML...