Foros del Web » Creando para Internet » HTML »

sobre MAP y AREA...

Estas en el tema de sobre MAP y AREA... en el foro de HTML en Foros del Web. he puesto una imagen de fondo y estoy definiendo una MAP con sus respectivas AREAS. Lo que quiero hacer es que al pasar el raton ...
  #1 (permalink)  
Antiguo 27/06/2005, 03:34
 
Fecha de Ingreso: agosto-2002
Ubicación: Encamp
Mensajes: 185
Antigüedad: 15 años, 3 meses
Puntos: 0
sobre MAP y AREA...

he puesto una imagen de fondo y estoy definiendo una MAP con sus respectivas AREAS.
Lo que quiero hacer es que al pasar el raton sobre cada AREA (onMouseOver) el area cambie de color o se "resalte" de alguna manera.

com se hace esto? he probado con "style.bordercolor=#000099" por ejemplo, y no funciona....

alguna solución??

gracias!
  #2 (permalink)  
Antiguo 27/06/2005, 08:08
Avatar de JhonDie  
Fecha de Ingreso: abril-2005
Mensajes: 60
Antigüedad: 12 años, 8 meses
Puntos: 0
Seria con un JavaScript...

redmon:

Eso se llama Imagenes RollOver, yo los he implementado con Javascripts no con solamente mapas de imagenes...

Lo que tendrías que hacer en Fireworks por ejemplo es que esa imagen la fracciones en partes pequeñas según las áreas que quieras resaltar y exportas por cada área de hipervínculo una imagen de nombre por ejemplo imagen.gif y luego le aplicas los cambios de color o le pones algún cuadro de resalte a esa área y la exportas con el nombre imagen_over.gif y con la funcion de javascript al pasar el puntero con el evento onOver cambias de la imagen.gif a la imagen_over.gif dándote la apariencia de que estás resaltando el área...

Yo tengo algunos códigos más detallados de esto pero deja los subo porque no estoy en mi PC, estoy en una PC publica...

Mientras te dejo un enlace donde puedes checar mas...
http://www.a1javascripts.com/mouseov...verbutton.html
__________________
Que tengas un productivo dia... JhonDie
  #3 (permalink)  
Antiguo 28/06/2005, 01:12
 
Fecha de Ingreso: agosto-2002
Ubicación: Encamp
Mensajes: 185
Antigüedad: 15 años, 3 meses
Puntos: 0
Gracias JHonDie!

esto me parece correcto, pero me llevara gran cantidad de trabajo, ya que cada imagen tiene por lo menos 20 regiones clicables....
Si no hay otra forma, lo haré así, pero si existe otro metodo...
algo como poner un borde del AREA visible, o algo similar...
  #4 (permalink)  
Antiguo 28/06/2005, 01:19
Avatar de guett_consul  
Fecha de Ingreso: febrero-2003
Ubicación: Bucaramanga
Mensajes: 236
Antigüedad: 14 años, 9 meses
Puntos: 0
Si hay otro metodo html trae muchas herramientas en cuanto esto te dejo un link de referencia hay estan todas las opciones en cuanto a area y map se refiere:

http://www.w3schools.com/tags/tag_map.asp

http://www.w3schools.com/tags/tag_area.asp

Con cualquiera de los dos te puedes guiar alli puedes ver la forma correcta de ingresar propiedades a la etiqueta.
muy buena referencia esta en ingles pero si quieres solo fijate en los examples...

bay.
__________________
Guett_Consul.
Telefonia IP Bucaramanga
Asterisk Bucaramanga

Última edición por guett_consul; 28/06/2005 a las 01:25
  #5 (permalink)  
Antiguo 28/06/2005, 01:43
 
Fecha de Ingreso: agosto-2002
Ubicación: Encamp
Mensajes: 185
Antigüedad: 15 años, 3 meses
Puntos: 0
ei guett_consul,
he mirado el link que me has puesto, ahí explica como funciona el MAP y el AREA, y no veo como hacer resaltar los bordes o el background del AREA. He probado directamente con un STYLE="border-color:#FF0044" y ni caso.....
  #6 (permalink)  
Antiguo 28/06/2005, 02:03
Avatar de guett_consul  
Fecha de Ingreso: febrero-2003
Ubicación: Bucaramanga
Mensajes: 236
Antigüedad: 14 años, 9 meses
Puntos: 0
lo siento lei mal el post ya te colaboro con lo otro...
__________________
Guett_Consul.
Telefonia IP Bucaramanga
Asterisk Bucaramanga
  #7 (permalink)  
Antiguo 28/06/2005, 02:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

Aunque no es exactamente lo que quieres, y solo funciona en explorer, puede darte una idea esta página de Carlitos: http://www.terra.es/personal5/sacrol...a%F1a/espa.htm

Otra posibilidad que valdría en todos los navegadores y mucho más trabajosa es crear recortes del mapa para cada elemento que quieras resaltar (serían imágenes fijas y cuadradas), por ejemplo con esta página: http://www.pepemolina.com/mapas/recortes.html luego editarlas para que cambien de color del resalte), y por último con los areas que ya supongo que tendrás hacer visibles los recortes con mouseover del map, y ocultarlas con el mouseout del area (que tendrías que definir en cada recorte)...

Trabajoso pero no imposible...

Si te basta con explorer, la página de Carlitos creo que es buena referencia... me parece que en los foros lo ha explicado.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 28/06/2005, 09:51
Avatar de JhonDie  
Fecha de Ingreso: abril-2005
Mensajes: 60
Antigüedad: 12 años, 8 meses
Puntos: 0
Insisto...

Insisto compañeros, no lo podreis hacer solo con MAP...

Llevo cinco años en el desarrollo de sitios web y jamas lo he logrado sin un buen codigo javascript...

Usa el Fireworks para exportar las partes de las imágenes y luego has los cambios necesarios y vuelvelos a exportar, luego usa el código JavaScript de la seccion de a1javascripts.com que te puse antes OK...

Saludillos
__________________
Que tengas un productivo dia... JhonDie
  #9 (permalink)  
Antiguo 29/06/2005, 01:12
 
Fecha de Ingreso: agosto-2002
Ubicación: Encamp
Mensajes: 185
Antigüedad: 15 años, 3 meses
Puntos: 0
pues realmente es una pena que no sea mas sencillo hacer esto....

gracias a todos!
  #10 (permalink)  
Antiguo 29/06/2005, 08:14
Avatar de guett_consul  
Fecha de Ingreso: febrero-2003
Ubicación: Bucaramanga
Mensajes: 236
Antigüedad: 14 años, 9 meses
Puntos: 0
que tal las zonas interactivas se hace una imagen .gif con transparencia que sea un marco y que esta se active onmousever asi no reemplazaria la imagen si no que superpondria...

voy a probar cuando tenga un poco mas de tiempo..

Depronto marcos flotantes y se le dan funciones de resalte onmouseover...

es solo una idea no lo he probado.
Saludos.
__________________
Guett_Consul.
Telefonia IP Bucaramanga
Asterisk Bucaramanga
  #11 (permalink)  
Antiguo 05/07/2005, 23:49
Avatar de guett_consul  
Fecha de Ingreso: febrero-2003
Ubicación: Bucaramanga
Mensajes: 236
Antigüedad: 14 años, 9 meses
Puntos: 0
Un poco tarde pero para completar este post quiero que se echen una pasadita por este link http://www.flickr.com/photos/vik407/12980251/ y mirense la imagen y como el autor de esta web le puso esos resaltes a la foto de esa mac, mirense el codigo y se ayudan en sus proyectos...

Hasta la proxima tarde pero a tiempo jeje
__________________
Guett_Consul.
Telefonia IP Bucaramanga
Asterisk Bucaramanga
  #12 (permalink)  
Antiguo 07/07/2005, 11:53
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

no estoy agregando nada porque la idea ya se mencionó; pero al ver el enlace me di cuenta de que no aclaraste el tipo de area, redmon. Si es rect, sí puedes tomar las coordenadas del área, superponerle un div con borde y simular el resalte. Los eventos serían onmouseover y onmouseout.

Dejo un enlace más

Aplicar filtro o similar sobre un elemento SHAPE de una imagen

saludos

furoya
  #13 (permalink)  
Antiguo 08/07/2005, 03:03
 
Fecha de Ingreso: agosto-2002
Ubicación: Encamp
Mensajes: 185
Antigüedad: 15 años, 3 meses
Puntos: 0
gracias furoya!

de hecho puedo adaptarlo todo a areas rectangulares... o sea que voy a provarlo!
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 10:08.