RSS

Links en imágenes y links responsive

08 Dic

El solo hecho de poner links con el tag <a> de HTML en imágenes fue algo nuevo para mí pero que con un poco de práctica, ponerle links a las imágenes fue super sencillo.

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

html

Paso a paso vamos a ver este proceso.

Tenemos la siguiente imagen y queremos ponerle link a cada una de la figuras. Para esto vamos a usar una herramienta en línea que te permite elegir el área que necesites y te obtiene el código del tag usemap


geometricas

Dicha herramienta está en este link seguimos los siguientes pasos para subirla y cargarla. Es necesarios seguir los 3 pasos, ya que con esto evitan a los bots:

usemap_1

Una vez cargada puedes elegir el tipo de figura para seleccionar una área y son 3: círculo, rectángulo y polígono y comienzas a elegir el área dentro la imagen.

usemap_2

Así va quedando

usemap_3

Terminado la selección de las áreas, clickamos en el botón html y obtenemos el código correspondientes a las coordenadas que elegimos:

usemap_6

Obtenemos el siguiente código al que podemos cambiar el name e id por comodidad, en mi caso le pondré “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>

Finalmente se usa así junto con el tag img, en la propiedad href irá nuestro link

<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 tienen links las imágenes 😀 pero la propiedad de usemap y map NO se ajustará a diferentes tamaños de pantalla. Para resolver esto, también es sencillo. Descarga este javascript y agrégalo en un  tag de script en tu html

Luego solo en tu js donde tengas tu document ready colocas este código y los links se ajustarán de acuerdo a la pantalla en la que se estén viendo:

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

Espero que te sea de utilidad este post. Cualquier duda o sugerencia, me la puedes enviar a ringhugos@gmail.com

 


Por cierto, quizá te pueda interesar bajar gratis este libro con dos tomos llamado “Fundamentos de matemáticas para ingeniería”

O bajar cualquiera de los libros en PDF que tengo en mi GoogleDrive

Anuncios
 
Deja un comentario

Publicado por en 8 diciembre, 2016 en HTML, CSS, JQUERY

 

Etiquetas: , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: