Cambiar de color un <area> en un mapa de imagen?

[kukat]

Hola de nuevo!

Estoy buscando alguna solución para cambiar el color de un área delimitada por coordenadas en una imagen.

Por ejemplo (de w3schools)

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>


Hay alguna forma de cambiar el color, o hacer un ":hover" sobre el atributo "area" con CSS? o con javascript/jQuery?

muchíssimas grácias.

[RafaRG]

hola. no sé si se podrá, ya que nunca he probado lo que tú dices (sí he hecho lo del area en una imagen).
pero yo haría un css así:

Código PHP:

  <style type="text/css">
area {
   background-color:transparent;
   }
area:hover {
   background-color:rgba(173,255,47,0.5);
   }
</style>  
   

dado que <area> es una etiqueta, lo lógico es que se pueda editar con algún estilo de css. si eso no funciona, ya habría que meterse en java script. espero que te sirva simplemente con css. XD

[IsaBelM]

si usas las etiquetas map de html, no es posible hacerlo con css. pero puedes hacer un mapa de imágenes con sprite css, sólo que en tu caso es con formas irregulares

[kukat]

Muchas grácias por las contestaciones.

he estado provando todo tipo de cosas.
La opción del CSS ya la doy por descartada.

Se podría hacer alguna cosa con CSS si fuera unas pocas "area", pero clar... es para 89 areas... XDDDD

Busco algo similar a esto: http://davidlynch.org/projects/maphilight/docs/demo_usa.html

Voy a ver si pregunto algo en la sección Javascript!

grácias! gràcies!

[IsaBelM]

para ahorrarte el camino. en la página de caricatos tienes un código ya montado

[furoya]

No sé si entiendo bien lo que quieres, pero te dejo algunos enlaces para que mires.

http://www.caricatos.net/mapas/index.html (el de caricatos que te mencionó IsaBelM)

Crear mapa con imagenes?

Aplicar filtro o similar sobre un elemento SHAPE de una imagen

Son viejos y no sé qué tan bien (o mal) andarán hoy, pero te van a servir para estudiarlos.

En realidad hay otra forma más. Pero usa una imagen editada, con partes transparentes o semi, que se destacan cambiando una capa detrás. Tendríamos que ver lo que quieres hacer para tirar una mejor idea.

[Carlangueitor]

Para eso yo creo que hoy en día una alternativa sería usar Canvas: http://www.designscripting.com/2011/...or-maps-html5/

Saludos

[furoya]

Es que (supongo, adivino) que ya hay una imagen, por eso trabaja con áreas. Si quiere destacar una parte con un recuadro, puede usar un div con borde y fondo transparente, y lo posiciona usando como referencia las mismas coordenadas del mapeado (las aplica con JS). Si quiere un círculo o formas irregulares, también puede mover una imagen ... o crear una capa de canvas. Pero insisto en que hay que entender qué está buscando hacer. Yo le dejé varios ejemplos para destripar; puede que le lleve un tiempo, y por eso aún no vuelve a aclarar un poco más el asunto.

Porque el código que puso no dice nada, lo ideal es ver la imagen y su propio código.

[IsaBelM]

me temo que no volverá por esto lares. ya está en el foro de js y caricatos le está ayudando

[furoya]

¡Qué lástima que no puso un enlace para que lo siguiéramos!

Igual después lo voy a buscar.

Como me quedé pensando en lo que dijo Carlangueitor, me hice una versión canvas con uno de los métodos que se pueden usar. No la publico porque me faltaría subir una imagen y pulirlo un poco. Sería para clips con formas irregulares (o al menos "no cuadradas").

[furoya]

Ya la encontré

Mapa con iluminación de zonas

Actualicé un enlace de los que dejé arriba con el ejemplo que comenté.

[maketoak]

y ya puestos, en relacion a esta duda. Como se podria cambiar el formato del texto del alt o del title de esta zona activa?. es que sale negro con fondo blanco y me gustaria cambiarlo.
es posible?
un saludo.

[furoya]

No. No tiene relación con esta duda.

El tooltip tiene los colores del sistema. Si tú lo ves negro sobre blanco, es porque así está configurado en el sistema operativo. Otros lo verán de otros colores.

Si no te gusta, lo reemplazas por una capa con formato y lo manejas con CSS o javascript. Hay chorrofientos ejemplos en la web sobre cómo hacerlo.
Nadie los va a poner aquí para que no lo echen a patadas por desvirtuar el tema, encima con algo repetido hasta el hartazgo.