Mapear una imagen en Web Responsive

[T262]

Hola a todos.

Llevo varios días intentando conseguir mapear una imagen que funcione en una web responsive.

He intentado hacerlo como dice esta [URL="http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html"]web [/URL] pero nada, no se si lo hago bien o no.

Tambien he encontrado esta [URL="http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html"]web[/URL] que solo utiliza HTML y CSS, pero seria mi ultima opcion, porque la imagen a mapear tendria mas de viente elementos.

No se si alguien sabe como hacerlo, si conoce otros métodos o sistemas.

[caricatos]

Hola:

Cada vez estoy más confuso con el término responsive (yo prefiero decir adaptable)...

Mapear una imagen es fácil, incluso yo yengo una página que obteiene áreas "online", pero son coordenadas fijas... si tu intención es que sea "escalable", creo que una buen opción es el formato svg (la "s" es de eScalable), y el truco para crear mapas con distintas escalas es saber usar atributos como viewbox...

Saludos

[pzin]

La mejor opción, o al menos la más elegante seguramente sea usar SVG. Yo intentaría hacerlo así.

No obstante, hace poco me pidieron hacer justamente eso en una página que usaba WordPress, así que usé esta cosa. Aunque no tiene mucho sentido usarlo si no usas jQuery ya en tu sitio.

[T262]

Justamente estoy intentandolo hacer con jQuery-rwdImageMaps, pero no lo consigo.

Con el SVG he encontrado algo de informacion pero confusa, y no me aclaro. Tengo que vectorizar toda la imagen? Como? Y como enlazo cada area?

[caricatos]

Hola:

Pensaba que ya tenías las áreas, si no es así, hay muchas opciones, incluso yo tengo una página que lo hace: Capturar áreas en imágenes... teniendo las áreas, basta en crear un fichero xml bien formado, con una etiqueta raíz svg (también puede ser un tag svg incrustado en la página), y cada área equivale a un tag polygon... pero eso ya deberías investigarlo... en mi pàgina hay bastante info (creo que suficiente).

Saludos