Multiples vínculos en una sola imagen
Resulta que quiero hacer un enlace a las diferentes páginas de redes sociales por medio de imágenes pero solo tengo una imagen donde aparecen los logos de facebook, tuenti y de twitter, ¿qué hago?
¡Buenas y complicadas noticias! existe un atributo de imagen que permite mapearla para crear múltiples enlaces sobre ésta, se trata de USEMAP con esta propiedad podemos crear varias áreas sensibles en una sola imagen, los pasos son los siguientes:
1. Cargo la imagen como se hace regularmente y agrego el parámetro USEMAP, luego por medio de area shape="rect" defino las posiciones por medio de cuatro coordenadas (x) y (y): el primer valor es la pareja xy de la esquina superior izquierda y la segunda pareja xy es la esquina inferior derecha, en codigo es:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4A1HVzyvfEjmW2Oau3SobKZ_JmWMGdu7VeP1futoNM1ls-B0ubggcChwoNA_vkE5-cszlLjmDddoyln2J_vCubzOZAPLi1bWnqPwXbq-TYfSsZfDIL5OhGOdJY04F3ul-ihegs3pDq2E/s320/logos-redes-sociales.gif" width="410" height="420" usemap="#mapita"/>
<map name="mapita">
<area shape="rect" coords="0,0,410,109" href="http://www.twitter.com" />
<area shape="rect" coords="0,109,410,262" href="http://www.tuenti.com" />
<area shape="rect" coords="0,262,410,420" href="http://www.facebook.com" />



0 comentarios:
Publicar un comentario
Suscribirse a Enviar comentarios [Atom]
<< Inicio