Image map y diseño responsive

Si alguna vez habeís estado intentando pasar una web diseñada y desarrollada hace unos años a diseño multipantalla (responsive) seguramente uno de los problemas que os habréis encontrado es el de los image maps.

Al pasar la web a responsive, las coordenadas para los links en los image maps dejan de funcionar cuando se cambia el tamaño de la pantalla.

¡Oh no! ¿Y ahora qué hago? Tengo que rehacer, recortar, reescribir…
Afortunadamente existe una solución más sencilla y que nos puede sacar del paso simplemente con modificar unas líneas del código.

Se trata de un Plugin para JQuery que hace que las coordenadas de los image maps se vayan recalculando automáticamente según va cambiando el tamaño de la ventana. Su instalación es muy sencilla:

  1. Descargamos de la página en GitHub del plugin el archivo jquery.rwdImageMaps.min.js
    stowball jQuery rwdImageMaps
  2. Guarda el archivo en la carpeta de scripts de tu proyecto web.
  3. Añade el código para activar el plugin en la cabecera de tu HTML (preferiblemente antes del </body>):
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.rwdImageMaps.min.js"></script>
    <script>
    $(document).ready(function(e) {
    	$('img[usemap]').rwdImageMaps();
    });
    </script>
  4. Y listo. Sube tu página al servidor y recarga. ¡Gracias Matt!

 

Publicado por

manuel

Me dedico al desarrollo de aplicaciones. Principalmente trabajo con XHTML, CSS, Javascript, XML, JSON, PHP, MySQL, Linux/MacOS X y Flash actionscript. Intento siempre trabajar con estándares y simplificar el desarrollo y las aplicaciones finales con el objetivo de orientarlas al usuario (que sean útiles y faciliten el trabajo).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *