lunes, 30 de mayo de 2011

Mapeado de imagenes, imagenes con diferentes links


El mapeado viene a ser algo parecido a delimitar zonas en una imagen. Cada zona reaccionará de una manera distinta que podremos "programar" mediante HTML.

Un ejemplo sería la siguiente imagen, que tiene definidas cuatro zonas. Se trata de una única imagen y los colores son para hacer más "visibles" dichas zonas. Cada una de ellas está delimitada por un rectángulo que empieza en las coordenadas (x,y) y termina en la (x1,y1). La zona azul, abarca desde el pixel 0,0 hasta el 199,99, siendo el primer número el desplazamiento horizontal y el segundo el vertical. La primera coordenada es la de arriba a la izquierda del rectángulo y la segunda la de abajo a la derecha, definiendo la diagonal del rectángulo. Como pueden ver en esta imagen:






 <div align="center">
<map name="mapa1"><area coords="0,0,199,99" href="http://blogeadores.blogspot.com/" shape="RECT" title="Pinchando aquí vamos al inicio del blog"></area>
<area coords="0,100,199,200" href="http://www.taringa.net/" shape="RECT" title="Pinchando aquí vamos a T!"></area>
<area coords="200,0,400,99" href="http://www.google.com.bo/" shape="RECT" title="Pinchando aquí vamos a Google"></area>
<area coords="200,100,400,200" href="http://www.taringa.net/perfil/WolfKing3086" shape="RECT" title="Pinchando aquí vamos a mi perfil en Taringa"></area>
</map>
<img alt="" border="0" id="BLOGGER_PHOTO_ID_5149918442876674082" src="http://1.bp.blogspot.com/_0eC4K-qZ7AM/R3gvidHloCI/AAAAAAAACUQ/fbC63ySADGg/s1600/map.jpg" usemap="#mapa1" /></div>


Cada una de ellas se ha definido para que sirvan de enlace a los distintos enlaces como la página de inicio del blog, taringa, google, etc. El código responde a la siguiente estructura:

<map name="mapa1">
<area shape="RECT" coords="x,y,x1,y1" href="URLdestino1" >
<area shape="RECT" coords="x2,y2,x3,y3" href="URLdestino2" >
...
</map>
<img src="URLimagen" usemap="#mapa1" />

Como pueden ver, hay que usar la instrucción MAP, definiendo las zonas que vamos a crear y luego añadir a la instrucción IMG, el atributo USEMAP, utilizando el mismo nombre del mapa que previamente hemos creado.

Las formas que se pueden definir:
  • RECT (rectángulo): "x1,y1,x2,y2" definiendo la diagonal tal y como se ha explicado
  • POLY (polígono): "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) un vértice del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono.
  • CIRCL (círculo): "x,y,radio" siendo x,y el centro del círculo.
El origen del sistema de coordenadas siempre estará situado en el extremo superior izquierdo de la imagen.

Es posible reemplazar el atributo HREF por NOHREF para una zona neutra de la imagen.

 Ahora a practicar y a hacer tus propias imagenes con diferentes estilos como mapas, firmas o cualquier cosa que se te pueda imaginar.

No hay comentarios:

Publicar un comentario

Inicio Sigueme Taringa Facebook Picasa Mail Como obtener este menú