Mapa de áreas e imagenes por encima de cada area

Thanat0s #1 Abr '11 Cofrade

Buenas, me ha surgido un problema grande que no tengo ni puta idea de como solucionar.

Tengo un mapa de áreas con un montón de áreas dentro y quiero que un script de js ponga por encima una imagen en una determinada área.

¿Puedo meter ids a las áreas?
¿Puedo seleccionar un área dentro de un determinado map sabiendo la id?

Si se pudiera hacer estas dos cosas, creo que podría sacar las coordenadas y meter un div con la imagen que quiero, haciendo que quede en el centro de esas coordenadas (¿cómo? aún no lo sé).

Pero claro, si no se puede hacer ninguna de las dos cosas anteriores, creo que estoy un poco jodido.

¿Alguna sugerencia? :S

Saludos y gracias.

VipeR_CS #2 Abr '11

Hace años utilicé una herramienta que le metías la imagen, seleccionabas de modo gráfico el area y le añadías el link (el js en tu caso, o lo que sea). Te salía el html con todo el código ya hecho. Lo malo es que no me acuerdo qué programa era, pero sí que tengo aún el código de salida, por si te sirve de algo xD

<div>
<map id="mapa" name="mapa">
<area shape="poly" alt="Asturias" coords="157,27,163,44,175,41,189,41,197,37,206,36,203,30,192,30,183,27,173,29" href="http://www.princast.es" title="Asturias" />
<area shape="poly" alt="Cantabria" coords="213,36,229,45,230,39,241,34" href="http://www.cantabria.com" title="Cantabria" />
<area shape="poly" alt="País Vasco" coords="251,35,258,35,272,39,269,47,267,56,252,49,256,42" href="http://www.euskadi.net" title="País Vasco" />
<area shape="poly" alt="La Rioja" coords="254,61,255,70,278,72,278,66" href="http://www.larioja.org" title="La Rioja" />
<area shape="poly" alt="Navarra" coords="279,47,289,40,297,46,288,72,284,59" href="http://www.cfnavarra.es/" title="Navarra" />
<area shape="poly" alt="Arag n" coords="307,47,341,49,342,67,335,80,332,106,323,113,311,130,287,125,297,112,292,101,280,94,287,75,296,74" href="http://www.aragon.es" title="Aragón" />
<area shape="poly" alt="Cataluña" coords="348,49,351,66,341,84,341,111,345,116,354,98,380,90,400,74,394,53,385,58,363,56" href="http://www.gencat.net/" title="Cataluña" />
<area shape="poly" alt="Galicia" coords="111,42,118,55,118,67,127,71,130,74,137,75,150,75,160,67,152,58,155,44,150,29,142,22" href="http://www.xunta.es/" title="Galicia" />
<area shape="poly" alt="Castilla y Le n" coords="163,56,172,48,202,46,225,53,242,53,247,68,255,77,279,79,271,96,248,91,222,111,213,123,199,128,171,120,167,120,162,104,176,91,176,86,165,72" href="http://www.jcyl.es/" title="Castilla y León" />
<area shape="poly" alt="Madrid" coords="226,122,226,117,233,116,238,110,240,116,248,126,240,131" href="http://www.munimadrid.es" title="Madrid" />
<area shape="poly" alt="Extremadura" coords="161,130,160,144,150,149,154,166,156,186,168,194,174,196,189,189,202,172,209,160,200,153,192,130" href="http://www.juntaex.es/" title="Extremadura" />
<area shape="poly" alt="Castilla La Mancha" coords="213,174,225,184,267,178,277,191,288,182,292,182,298,173,301,173,296,157,291,147,295,134,281,133,279,117,287,112,277,102,251,102,246,109,255,116,255,131,239,140,220,132,205,135,210,151,219,153" href="http://www.jccm.es/" title="Castilla La Mancha" />
<area shape="poly" alt="Andalucía" coords="147,208,148,222,162,225,180,249,191,243,200,250,226,239,269,239,275,232,279,235,289,223,274,203,267,199,264,188,226,194,207,181,201,186,198,198,175,202,161,202" href="http://www.andalucia.org/" title="Andalucía" />
<area shape="poly" alt="Murcia" coords="283,197,296,214,307,212,312,205,307,200,304,183" href="http://www.carm.es/" title="Murcia" />
<area shape="poly" alt="Valencia" coords="315,193,332,178,321,163,321,151,336,119,329,118,321,133,306,139,301,151,307,158" href="http://www.valencia.es/" title="Valencia" />
<area shape="poly" alt="Islas Baleares" coords="356,159,350,169,357,180,365,181,434,138,412,121,375,136,349,167" href="http://www.caib.es/" title="Islas Baleares" />
<area shape="poly" alt="Islas Canarias" coords="92,329,111,323,118,295,106,295,18,309,13,339" href="http://www.gobcan.es/" title="Islas Canarias" />
<area shape="poly" alt="Ceuta" coords="190,275,191,284,197,283" href="http://www.ciceuta.es/" title="Ceuta" />
<area shape="poly" alt="Melilla" coords="264,288,258,293,263,301,267,301" href="http://www.melilla.es/" title="Melilla" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>

1 respuesta

Thanat0s #3 Abr '11 Cofrade

#2 Esa es la parte que ya tengo, ahora lo que quiero hacer es que en una de tus áreas, por ejemplo Valencia, aparezca por encima una chincheta (imagen), sin modificar el mapa de fondo y que salga justo encima de Valencia, no en Madrid.

pd: yo he sacado las áreas con el Imagen Ready.

VipeR_CS #4 Abr '11

Vale, pensé que no tenías eso tampoco xD. Pues lo que pides ya no recuerdo una mierda, hace mucho que no toco esto. Imagino que el mouseover se podrá aplicar en el tag de área y debería afectarle sólo a él. O un mouseover en el map llamando a una función que le pase como parámetros las coords del ratón y te ahorras poner chorrocientos mouseovers.

Tampoco creo que haya problema en meterle un id a cada área como dices en #1, pero vete a saber. Cuestión de probar.

Thanat0s #5 Abr '11 Cofrade

Bueno, he conseguido una solución, por si a alguien más le interesa, tiene el ejemplo aquí:

http://www.workwithchoicecuts.com/demo/html-image-map-revisted

Saludos!

Usuarios habituales