Lo que vamos a intentar hacer es crear una imagen en la que dependiendo en que zona pinchemos con el ratón nos lleve a diferentes sitios. Vamos, que lo que vamos a hacer es una imágen con varias zonas con diferentes vínculos. Una vez que tenemos una imagen y la hemos subido a alguna página tenemos que definir las áreas en las que la vamos a dividir. Los parámetros que definen un mapa de imagen son los siguientes:
<MAP>....</MAP> Entre estos tags meteremos todo el código del Mapa de Imagen y deberemos definir el area que vamos a definir como activable. Se pueden usar diferentes áreas, pero aquí vamos a ir a lo sencillo, que es el rectángulo. Para ello debemos poner <AREA shape=rect coords="x,y,x2,y2" donde X,Y son las coordenadas de la esquina superior izquierda y X2,Y2 las coordenadas de la esquina inferior derecha del rectángulo que definimos.
<MAP>....</MAP> Entre estos tags meteremos todo el código del Mapa de Imagen y deberemos definir el area que vamos a definir como activable. Se pueden usar diferentes áreas, pero aquí vamos a ir a lo sencillo, que es el rectángulo. Para ello debemos poner <AREA shape=rect coords="x,y,x2,y2" donde X,Y son las coordenadas de la esquina superior izquierda y X2,Y2 las coordenadas de la esquina inferior derecha del rectángulo que definimos.
Tal vez se vea mejor con un ejemplo:
El código usado para este ejemplo ha sido este:
<img src="http://img119.imageshack.us/img119/4982/sinttulo1gw5.jpg" usemap="#ejemplo" height="50" width="300" border=0/>
<map name="ejemplo">
<area shape="rect" coords="0,0,94,50" href="http://www.google.es">
<area shape="rect" coords="96,0,200,50" href="http://www.yahoo.es">
<area shape="rect" coords="202,0,298,49" href="http://www.altavista.com"></map>
Si quereis saber más sobre Mapa de Imágenes o ver como hacer diferentes áreas (círculos, polígonos) pasaros por esta página: Webestilo
Cargando...
6 comentarios:
¿Podrías ayudarme a conseguir que al pinchar en las imágenes que hay en mi blog saliera la web que yo quisiera? Con la nueva version del blog no se como se hace.
Gracias y enhorabuena por el blog
A cualquier imagen le puedes poner un vínculo a donde quieras... si es en un post, simplemente la seleccionas como si fuera texto y le das al "clip" de hipervínculo para darle la direccion que quieras... si es una imágen en la plantilla solo tienes que poner esta estructura:
<a href="direccion que quieras"><img src="direccion de la imagen" img="" /></a>
El problema es que al poner la imagen en la plantilla solo me da la opcion de elegir la imagen, y no me deja escribir ningun codigo. Me estoy volviendo loco y no se donde escribirlo.
Gracias
A ver... si lo que quieres es meter código, no uses "añadir imagen" hazlo en "añadir HTML/javascript".. si luego le pones una imagen o un script es cosa tuya... si lo que quieres hacer es un mapa de imagen , o una cabecera... simplemente haces la imagen con el tamaño que se ajuste y luego la subes a una página externa como imageshak. Con la url de la imagen haces el mapa o el hipervinculo y la pones en la plantilla, pero en modo "añadir html"
Gracias. Lo intentaré,
muchisimas gracias! el mejor tutorial que encontre despues de dias: simple, práctico, funcional. Felicidades. No sabes de la que me salvaste =D
Publicar un comentario