Bienvenido a Webpanto

Menú Principal
Principal
Antivirus
Archivo de Noticias
Descargas
Juegos
Manuales
Programación
Top Webpanto
Tópicos
Videos
Publicidad
Servicios
Test de Conexión
Ultimos Virus
Busca en tu Web

Buscar en la Web
Noticias en tu Web
Quienes Somos
Publicidad
Agregar a Favoritos
Recomiéndanos
Enlázanos
Contactar
FAQ Webpanto
Webs Amigas
Solotutoriales
Informatica
OfertiLandia
Juegos Gratis
Cursos y tutoriales gratis
Varios links en una misma imagen





Hoy es posible linkear solo una o varias parte de una misma imagen a diferentes destinos, gracias al tag MAP.

Los mapas de imágenes convierten parte de la superficie de un .gif o .jpg en un link a otra dirección. La diferencia de enlazar la imagen a un url específico es que estaríamos tomando la totalidad de la superficie de la imagen, en cambio, utilizando las etiquetas MAP podemos especificar la forma, tamaño y coordenadas sobre la imagen.

Crear las etiquetas no será difícil, lo que puede llevar algo de tiempo es encontrar las coordenadas exactas. El código sería el siguiente:

<img SRC="nombredelarchivo.jpg" USEMAP="#ejemplo" BORDER=0 height=XXX width=XXX>
<MAP NAME="ejemplo">

Luego es necesario especificar la forma y tamaño del sector a linkear.
Las formas puede ser círculos (CIRCLE), rectángulo (RECT) o una polilínea (POLY), y se especifican en la etiqueta SHAPE.

Además, hay que incluir las coordenadas de la superficie de trabajo, relativas de la esquina superior izquierda de las imágenes.
En caso de un círculo serás tres números, separados por comas y entre paréntesis. Los dos primeros especifican las coordenadas X,Y y el tercero el radio.
Para los rectángulos tendremos cuatro valores, los dos primeros marcan las coordenadas del vértice superior izquierdo, y los restantes el ángulo opuesto.
Y para las polilíneas, se dan pares de valores por cada vértice. Obviamente, las dos ultimas deben coincidir con las dos primeras, para cerrar la polilínea.

<AREA SHAPE=CIRCLE COORDS="x,x,x" HREF="http://...">
<AREA SHAPE=RECT COORDS="x,x,x,x" HREF="http://...">
<AREA SHAPE=POLY COORDS="x,x,x,x,x,x,x,x...." HREF="http://...">

Para no volverse monos buscando las coordenadas correctas, existes pequeños programas que lo hacen por nosotros. Solo se debe abrir la imagen y especificar las áreas y los links, y por resultado el programa nos dará el código html listo para incluir en la página.

El más recomendado es MapThis, ya que es gratuito y nos permite trazar mapas de imágenes con muchas formas diferentes.




Artículo por cortesía de Fabian Oscar Muller de la web http://www.webexperto.com









Copyright © por Webpanto Derechos Reservados.

Publicado en: 2005-04-24 (2113 Lecturas)

[ Volver Atrás ]

Fluor y Beldan © copyleft 2003, Webpanto.com

SexyWorldTube | Cocina Sencilla | Portal del Rock | Rockcore | Valencia Central | Juegos para Flash | Juegos Jugon | Maceto Huerto

PHP-Nuke Copyright © 2004 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Página Generada en: 0.03 Segundos