como mostrar borde a un area de map ?

waldragon · #1 (**permalink**) 02/04/2013, 15:21

buenas, hace algunos dias que estoy armando un sitio para poner enlaces en una imagenes y lo llevo bastante bien gracias a la ayuda de varios usuarios del foro, pero necesitio saber como hacer lo siguiente...

...tengo un map con varios areas y me gustaria que se viera cada area resaltado con un borde rojo, he buscado mucho pero parece que no se le pueden dar estilos a los areas, alguien sabe algun truco o algo parecido? esto es lo que tengo...

aca pongo un ejemplo para ver si me dan una pista, yo en realidad muestro las areas dinamicamente desde una base de datos... despues lo adapto

Código HTML:

Ver original<map name="mapa1"> 
<area alt="Pulsa para ver la página de mis amigos" shape="CIRCLE" coords="44,36,29" href="#">
 <area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#">
 <area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#">
 <area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#">
 </map> 
<img src="images/html/mapa1.gif" width="380" height="72" alt="Mapa de imágenes. Pulsa en cada una de los círculos." border="0" usemap="#mapa1">

gracias, seguro que CARICATOS puede darme una mano

caricatos · #2 (**permalink**) 02/04/2013, 16:45

Hola:

Cita:

Iniciado por waldragon

...
gracias, seguro que CARICATOS puede darme una mano

¡Je, je!, al menos me he interesado en el tema...

Como sabes, no existe un estilo para hacer bordes en áreas, así que hay que plantearse alternativas.

La alternativa que funciona en todos los navegadores es el efecto rollover superponiendo una imagen transparente y el borde dibujado. Con php y las librerías GD es muy fácil ya que tiene primitivas para hacer polígonos, círculos y cuadrados.

Las otras alternativas solo valen en navegadores actuales, pero el porcentaje de uso creo que es muy alto. El más sencillo es para mi el uso del formato svg, que a la vez podría usarse sin depender de javascript.

La otra poción que se me ocurre es canvas, donde fábricar polígonos a partir de las coordenadas de un mapa es también muy sencillo, pero yo no lo he probado solo con bordes sino con figuras rellenas (en canvas admito que estoy algo verde)

Si te decantas por alguna de estas opciones, avísame para ayudarte.

Saludos

Albuss · #3 (**permalink**) 02/04/2013, 18:56

Cita:

Iniciado por caricatos

La otra poción que se me ocurre es canvas, donde fábricar polígonos a partir de las coordenadas de un mapa es también muy sencillo, pero yo no lo he probado solo con bordes sino con figuras rellenas (en canvas admito que estoy algo verde)

Si te decantas por alguna de estas opciones, avísame para ayudarte.

Saludos

Si yo tuviera que elegir una opción , elegiría el cambas, si lo que buscas son bordes rebuscados, es mas facil en cambas dibujar en pantalla esos resultados, Si googleas un poco encontraras miles de funciones para dibujar figuras en cambas.

emprear · #4 (**permalink**) 02/04/2013, 23:23

Una buena opción, SVG, o la librería Raphael.js, para dar compatibilidad a <IE9 y Safari que no tienen soporte nativo para SVG.
Demo:

http://foros.emprear.com/svg/mapaarg.html

SAludos

caricatos · #5 (**permalink**) 03/04/2013, 01:26

Hola:

Cita:

Iniciado por emprear

Una buena opción, SVG, o la librería Raphael.js, para dar compatibilidad a <IE9 y Safari que no tienen soporte nativo para SVG.
Demo:

http://foros.emprear.com/svg/mapaarg.html

SAludos

Me gusta ver que te interesas en svg, ya que entre otras cosas me gusta debatir.

.

La opción svg, al tratarse de un mapa, los enlaces pueden ponerse con las etiquetas "a", y el efecto mouseover se puede lograr sin necesidad de javascript, básicamente con estilos (a:hover {stroke: black;}), o como en mi mapa de España con etiquetas svg:

Cita:

Y la imagen del mapa puede ser un tag "image" svg.

Saludos

emprear · #6 (**permalink**) 03/04/2013, 07:06

Si, por ahora son algunos escarceos solamente. Ya hace tiempo había hecho alguna que otra cosa con svg.
Lo que más me preocupa es la compatibilidad, por estos pagos la combinación XP/IE8 aún tiene mucho target, para colmo adobe abandonó el SVG viewer. Entre otras cosas ya había analizado tu mapa, y observé que cambiar atributos con set no funciona en IE9.
Creo que terminaré inclinándome por estudiar a fondo la librería que menciono.
Gracias por los datos y Saludos

caricatos · #7 (**permalink**) 03/04/2013, 08:14

Hola:

Cita:

Iniciado por emprear

...y observé que cambiar atributos con set no funciona en IE9.
...

Creo que por eso después probé el efecto solo con estilos (:hover como puse antes), y IE9 no se resistió...

El caso XP/IE8 es el punto débil, y debemos resignarnos. Pero se trata de casos hoy por hoy, más difícil de encontrar (también existen casos en España).

Saludos

waldragon · #8 (**permalink**) 03/04/2013, 13:52

encuentro mucho mas practico usar SVG, pero veo que la coordenadas son muy diferentes a las que usaba con MAP, en este caso los numeros que van en D...

... cuando use MAP y AREAS arme un script para enviar la posicion del mouse sobre la imagen a un textarea y de ahi lo guardaba con otros datos en la base de datos, pero como averiguo esos D para luego guardarlos con mi sistema?

caricatos · #9 (**permalink**) 03/04/2013, 15:40

Hola:

No sé si esos "D" se refieren al atributo "d" de un tag path (camino/recorrido), pero las coordenadas de los areas de los mapas (shape="poly"), se corresponden con el atributo points del tag polygon svg (exactamente igual)...

El tag path es más complejo ya que se pueden mezclar rectas y curvas, pero los polígonos no tienen curvas, así que se corresponden con lo que comenté antes...

Desde un polígono se puede obtener un path, pero la inversa está condicionada a que no existan curvas... (no recuerdo si referencié mi último apunte: Polígonos: svg vs. canvas)

Saludos