22 julio 2010

Colocar varios enlaces en una sola imagen usando Mapas de Imagenes

 

Para los que no saben, y aquellos que deseen saber, esta forma de enlazar tiene mucho tiempo, casi nadie se interesa en usarlo pero es una forma interesante y bonita de colocar varios links en tu blog en una misma imagen. Este metodo podria servir, si por casualidad, se te ocurre hacer el menu de tu blog en la misma cabecera, de esta forma, podras enlazar diferentes sitios usando las coordenadas de la imagen.

Te explico como va esto, pero, antes, mira la proxima imagen de abajo. Podras ver la figura de un saltamontes con grandes ojos. Esa imagen tiene dos enlaces. Si le das clic en el ojo superior de la imagen, podras ver que te lleva a la pagina principal de este blog, mientras que si das clic en el ojo superior, veras que te llevara a la pagina de contacto. Con un enlace normal de imagen, solo podrias acceder a un enlace por cada imagen. Eso es lo maravilloso.







Ahora, veamos el codigo que usamos para hacer esto:

<div id="imagen1">
<img border="0" src="http://1.bp.blogspot.com/_ANAc3M1UV3E/TEj8rxeHzSI/AAAAAAAABJg/EJrn_0B3JyE/s1600/20091206222801_ojos+arco+iris.jpg" usemap="#Map" />
<map id="Map" name="Map">
<area coords="111,73,140,96" href="http://www.frikibloggeo.com.ar/" shape="rect" target="_blank">
<area coords="61,104,93,128" href="http://www.frikibloggeo.com.ar/p/contacto.html" shape="rect" target="_blank">
</map></div>

EXPLICACION DEL CODIGO

En rojo: Es la id del codigo en la etiqueta div
En azul: Es la URL de la imagen en proporciones reales (Debes usar la imagen con sus propias medidas)
En naranja: Las coordenadas de los ojos dentro de la imagen
En azul: Los enlace a los que nos dirije cada ojo.

Te doy el codigo limpio.

<div id="nombre">
<img border="0" src="URL de la imagen" usemap="#Map" />
<map id="Map" name="Map">
<area coords="Coordenadas1" href="link1" shape="rect" target="_blank">
<area coords="coordenadas2" href="link2" shape="rect" target="_blank">
</map></div>


Sacar las coordenadas en la imagen es muy sencillo. Usando el Paint de Windows o cualquier otro programa de editado de fotos podras hacerlo. Aqui te dejo este manual que hice explicando paso a paso que hacer para sacar las coordenada usando Paint.





'

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo