Mapa de imagen con Thickbox
En HTML se llama mapa de imagen a una imagen que posee zonas seleccionables a las que se les asigna una URL diferente, que puede ser una página web, otra imagen o una dirección de correo.
Un ejemplo podría ser un mapa contenido en una sóla imagen para una agencia de viajes, las zonas serían los continentes y los países. Al pulsar sobre cada país se dirige al usuario a una página web con la información correspondiente a ese lugar que se desea visitar.
En el caso de que la URL a mostrar sea otra imagen quizás nos interesaría que el usuario no abandone la página actual y se le muestre la información en una ventana con el típico efecto Lightbox. Si usas WordPress es muy fácil conseguir este efecto, no hace falta instalar ningún plugin.
WordPress incluye una librería jQuery (javascript) llamada Thickbox que utiliza para las ventanas del panel de administración. Podemos hacer uso de ella cuando la necesitemos para las imágenes en un post.
Puesto que nos interesa un mapa de imagen para los posts de WordPress, el tratamiento es el mismo que si usaras un enlace normal a una imagen con Thickbox. La diferencia está en el atributo HTML <area> que define una zona de un mapa de imagen en vez de un enlace.
Ejemplo: <area class="thickbox" shape="rect" coords="108, 20, 227,118" href="http://tudominio/tu-imagen.jpg" title="Bonito monitor" alt="Bonito monitor" >
Es decir, al igual que añadíamos la clase class="thickbox" para un enlace
<a class="thickbox"... >
hacemos lo mismo con
<area class="thickbox"
dejando el resto igual que en cualquier otro mapa de imagen.
Al hacer clic en la zona de la imagen referida al monitor se ejecutará Thickbox con la imagen que se le indique en la URL. Por supuesto, debes subir las imágenes que usará Thickbox.
Aquí el código completo:
<img src="http://dominio.com/mapa.jpg" width="350" height="250" border="0" usemap="#mimapa"> <map name="mimapa" id="mimapa"> <area class="thickbox" shape="rect" coords="108, 20, 227,118" href="http://dominio.com/cuadrado.jpg" > <area class="thickbox" shape="circle" coords="51, 137, 36" href="http://dominio.com/circulo.jpg" > <area class="thickbox" shape="polygon" coords="249, 109, 336, 119, 321, 192, 283, 211, 186, 185, 233, 169" href="http://dominio.com/poligono.jpg" > </map>
Recuerda que para que funcione lo anterior debes decirle a WordPress en tu theme que quieres usar Thickbox cargando los scripts necesarios con la función <?php add_thickbox(); ?>
Si no usas WordPress también puedes hacer uso de Thickbox. Está disponible en este enlace, puedes descargarlo y seguir las instrucciones. Normalmente se trata de añadir a la cabecera de tu sitio web la URL a los archivos javascript necesarios para Thickbox incluída la hoja de estilos correspondiente, que puedes personalizar.
