Links en imágenes y links responsive

Links en imágenes y links responsive

Hugui Dugui

Hay una propiedad del tag img de HTML que se llama usemap, el cual te permite colocar coordenadas sobre una imagen y sobre dichas coordenadas poner los links con el tag a.

Para el ejemplo de esta entrada vamos a usar la siguiente imagen a la que a cada figura le vamos a poner links:


Las coordenadas se pueden poner manualmente o usar alguna herramientan en línea que te ayudan a seleccionar áreas y generar las coordenadas. En este caso vamos a usar la segunda opción en este sitio.

Entonces entramos y lo primero que nos pide es subir la imagen, solo sigue los pasos que te muestra:


Una vez cargada la imagen puedes elegir el tipo de selector: círculo, rectángulo o polígono (selección libre). En los botones de + y - pones y quitas selecciones.


Terminada la selección de áreas, lo último es generar el código html de usemap; para esto basta con dar click en el botón con la etiqueta html como se muestra a continuación:



Entonces, finalmente para usar el use map necesitas poner la imagen con img y la propiedad usemap que le indica las coordenadas a usar en esa imagen, en este caso el nombre que los liga es "geometricas" y en el href ahí pones el link a donde diriges al dar click, como se muestra en el siguiente código:

<img src="ruta/imgen.jpg" usemap="geometricas">
<map id="geometricas" name="geometricas">
    <area shape="rect" title="" coords="14,16,93,92" href="circulo.html"/>
    <area shape="circle" title="" coords="196,62,45" href="cuadrado.html" />
    <area shape="poly" title="" coords="34,192,81,118,134,195,97,190" href="trinagulo.html"/>
    <area shape="rect" title="" coords="166,131,278,191" href="rectangulo.html" />
</map>

Con esto ya tienes links sobre una imagen pero ahora es requerido que estos links se sigan manteniendo en la posición que los pusiste en modo responsive. Para esto hay que poner el siguiente plugin de jquery:

/*
* rwdImageMaps jQuery plugin v1.5
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2013 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);

y usarlo en tu document ready de la siguiente forma:


$('img[usemap]').rwdImageMaps();


Hasta aquí esta entrada, espero que te sea de utilidad como lo fue para mí, cualquier duda o comentario, házmelo saber en ringhugos@gmail.com, también puedes escribirme al whatsapp, en el footer está mi número. Muchas gracias por leer el blog :D