Hacer una imagen y que tenga multiples links

[luzzifer]

Hola quisiera saber como puedo hacer una imagen y generarle links a algunas secciones de esa imagen, lo he visto en algunas paginas pero nose como se hace, quisiera que por favor me orienten ni bien consiga un ejemplo publico la imagen para que puedan observarla.

Esta es la imagen:

Y en este enlace se ve como en la pagina le pusieron links a cada auto de la imagen anterior:
Click aqui

[memoadian]

pues si te fijas en el código fuente usaron map - area

[caricatos]

Hola:

Es cierto que se usan mapas en estos casos, pero tu ejemplo es bastante básico... al menos podrían ponerle un title a las áreas.

Una alternativa que he descubierto hace poco son las imágenes svg... Si buscas en Internet, seguro que te topas con mi Mapa de España...

Saludos

[memoadian]

incluso se podría usar una lista de links con un background en comun y algunos trucos css.

[cristian_cena]

HTML solo genera "rectángulos" (o elementos que css trata como rectángulos: ver "modelo de cajas css / css box model") y brinda la posibilidad de crear mapas de imágenes, lo cual para tu caso puede estar bien, pero si quieres interactividad (eventos sobre los elementos de tu gráfico) <map> te va a resultar limitado (imagina un mapa que al hacer hover sobre una provincia cambie de color).

SVG (demo) es por decirlo de un modo fácil: "etiquetas a las que puedes añadir eventos javascript", de hecho hay una librería popular llamada raphael.js (inspecciona el código de los ejemplos). También existe canvas, pero con svg puedes exportar un mapa dibujado en illustrator por ejemplo, y con canvas no se como se haría eso. Por lo pronto y mientras siga ignorando como trabajar con canvas, te recomiendo probar con svg cuando necesites tener eventos sobre areas poligonales. Aunque como dije, en tu caso con <map> lo puedes hacer, sin meterte en tanto lío.

Saludos.

[luzzifer]

Hola, antes que nada estoy super agradecido por lo que me aportaron y estube investigando y la verdad que no entiendo mucho como genero el html y que mapee la imagen.

¿Hay alguna guia o tutorial de como hacer eso? Solo quiero poner un link a cada auto nada mas, como puedo hacerlo?

Ya tengo un codigo a utilizar:

Código HTML:

<map name="FPMap0">
<area href="content/blogsection/4/32/" shape="rect" coords="318,228,433,258">
 

y a continuacion de ese la imagen:

Código HTML:

<img src="templates/adlcweb/images/logo.gif" usemap="#FPMap0" border="0" width="558" height="270">
 

¿Esta bien para utilizar? es esta la forma de mapear una imagen?

¿Como obtengo las coordenadas de la imagen? Utilizo ubuntu y nose como obtener las coordenadas
Muchas gracias de antemano. saludos espero pronto la respuesta

[emprear]

Hace unos días se planteó esto
http://www.forosdelweb.com/f4/duda-p...iados-1011828/

Es basicamente lo mismo, un mapa de imágenes puede ser la solución, el mismo te permite definir áreas que no solo pueden ser rectángulos, sino todo tipo de polígonos, en cuanto a la obtención de coordenadas en casos más complejos, la mayoría de los programas de diseño, Photoshop, corel, Fireworks, Illustrator... tienen herramientas para la creación de mapas precisos o definición de hotSpots (areas clickeables)

Ejemplo:
http://foros.emprear.com/html/image_map/estanteria.html

SVG, es otra buena alternativa, pero si estamos hablando de imágenes no vectoriales, prefiero los mapas

SAludos