Foros del Web » Programando para Internet » Javascript »

como mostrar borde a un area de map ?

Estas en el tema de como mostrar borde a un area de map ? en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/04/2013, 15:21
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 13 años, 10 meses
Puntos: 55
como mostrar borde a un area de map ?

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
  1. <map name="mapa1">
  2. <area alt="Pulsa para ver la página de mis amigos" shape="CIRCLE" coords="44,36,29" href="#">
  3.  <area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#">
  4.  <area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#">
  5.  <area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#">
  6.  </map>
  7. <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
  #2 (permalink)  
Antiguo 02/04/2013, 16:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: como mostrar borde a un area de map ?

Hola:

Cita:
Iniciado por waldragon Ver Mensaje
...
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 02/04/2013, 18:56
Avatar de Albuss  
Fecha de Ingreso: enero-2012
Ubicación: Coruña
Mensajes: 475
Antigüedad: 12 años, 2 meses
Puntos: 30
Respuesta: como mostrar borde a un area de map ?

Cita:
Iniciado por caricatos Ver Mensaje

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.
  #4 (permalink)  
Antiguo 02/04/2013, 23:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: como mostrar borde a un area de map ?

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 03/04/2013, 01:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: como mostrar borde a un area de map ?

Hola:

Cita:
Iniciado por emprear Ver Mensaje
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:
<set attributeName='stroke' from='#00FF00' to='#000000' begin='mouseover' end='mouseout'/>
Y la imagen del mapa puede ser un tag "image" svg.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 03/04/2013, 07:06
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: como mostrar borde a un area de map ?

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 03/04/2013, 08:14
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: como mostrar borde a un area de map ?

Hola:

Cita:
Iniciado por emprear Ver Mensaje
...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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 03/04/2013, 13:52
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 13 años, 10 meses
Puntos: 55
Respuesta: como mostrar borde a un area de map ?

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?
  #9 (permalink)  
Antiguo 03/04/2013, 15:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: como mostrar borde a un area de map ?

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: area, html, map
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:08.