Foros del Web » Creando para Internet » Diseño web »

borde en areas de una imagen

Estas en el tema de borde en areas de una imagen en el foro de Diseño web en Foros del Web. hola, después de mucho buscar pero no encontrar nada que me sirviese me he decidido a escribir aqui... tengo diferentes imagenes con areas que son ...
  #1 (permalink)  
Antiguo 09/02/2010, 12:18
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
borde en areas de una imagen

hola,

después de mucho buscar pero no encontrar nada que me sirviese me he decidido a escribir aqui...

tengo diferentes imagenes con areas que son vinculos. esto es dinamico, quiero decir, pueden sufrir cambios frecuentemente.

lo he hecho utilizando las etiquetas img, map y area. Lo que pasa es que quiero marcar esas areas con un borde o hacerlas distinguir de alguna manera.

alguna sugerencia??
  #2 (permalink)  
Antiguo 09/02/2010, 13:17
Avatar de morior  
Fecha de Ingreso: agosto-2009
Ubicación: Barcelona
Mensajes: 437
Antigüedad: 8 años, 4 meses
Puntos: 12
Respuesta: borde en areas de una imagen

Puedes probar a ponerle bordes:


border="1"

y luego con CSS le metes una clase a cada tipo de elemento y de ahí le puedes dar diferentes tipos de bordes:

Esto no es mío es un copy paste de: http://www.programacionweb.net/artic...iculo/?num=321

Puedes ir a leer el artículo allí pero seguramente con esto te pueda valer.


none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontínuo - - -
solid - Borde contínuo
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro
__________________
Juego de navegador online
  #3 (permalink)  
Antiguo 10/02/2010, 03:26
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
Respuesta: borde en areas de una imagen

gracias por tu respuesta pero no me ha valido...

este es el html:

Código HTML:
Ver original
  1. <img src="mapa.jpg" usemap="#mapa" title="mapa" alt="mapa" />
  2.  
  3. <map name="mapa" id="mapa">
  4.     <area style="border:1;" class="imap" alt="area" href="http://www.google.com" target="_blank" title="area" shape="rect" coords="435,140,470,155"/>
  5. </map>


y el css es el siguiente:

Código CSS:
Ver original
  1. map area.imap{
  2.     border:1px solid blue;
  3. }

el area con el vinculo esta bien, pero no aparece ningún borde alrededor de este...
  #4 (permalink)  
Antiguo 10/02/2010, 04:30
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: borde en areas de una imagen

Hola:

El método que yo conozco es superponiendo imágenes... Creación de áreas en imágenes

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 10/02/2010, 05:17
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
Respuesta: borde en areas de una imagen

gracias! tiene buena pinta la verdad. a ver si lo pruebo en seguida y te comento.
  #6 (permalink)  
Antiguo 10/02/2010, 10:16
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
Respuesta: borde en areas de una imagen

hola de nuevo!

he estado probando lo que me has dicho. y es lo que necesito pero los usuarios de mi aplicación subirán la imagen y me daran cada vinculo con sus coordenadas. Con esos datos, al guardar, debe de aparecer la imagen y cuando pases por encima de un area, este se tiene que resaltar. Esto es lo que he conseguido siguiendo el enlace que me has puesto; http://www.caricatos.com/mapas/index.html. Pero necesito el script con el que se crea la imagen con las coordenadas para luego superponerla....

o alguna otra manera de resaltar el area. No hay alguna otra manera más simple de hacerlo??
  #7 (permalink)  
Antiguo 10/02/2010, 13:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: borde en areas de una imagen

Hola:

Pues quieres algo un poco complejo... si quieres poner una cosa concreta como un círculo o una imagen pequeña, bastaría con que pinchasen en la imagen para conseguir las coordenadas, pero subiendo las propias imágenes... habrá que saber luego referenciarlas... y se corre el riesgo de que descuadre todo...

Procura explicar mejor tu problema... y que lenguaje usas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #8 (permalink)  
Antiguo 11/02/2010, 03:03
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
Respuesta: borde en areas de una imagen

pues vaya, con lo facil que parece...

estoy modificando un wiki, dokuwiki, que se basa sobre todo en php y un poquito de javascript. el html se consigue sobre todo a través de php. bueno, y también tengo css.

los usuarios escriben los articulos en un lenguaje de wiki. Tengo un mediamanager para subir imagenes, aqui, eligiendo la imagen y dandole a un icono se abre una pagina con javascript para conseguir las coordenadas. al editar la página, utilizando un sintaxis concreto especifican la imagen, y los vinculos que debe de haber con las coordenadas correspondientes a cada vinculo. al guardar la página, creo mediante php el html que le corresponde. Ahora lo que quiero es, que de alguna manera esos areas queden resaltadas, ya sea por javascript, por css o php...

alguna manera tiene que haber... un ejemplo de lo que quiero esta en el facebook, donde al pasar por encima de un vinculo que es el nombre de la persona que aparece en la foto, aparece un cuadro azul en el area donde se supone que se encuentra esa persona.

no sé si se entiende mejor.

de todos modos, gracias por las respuestas.
  #9 (permalink)  
Antiguo 18/03/2010, 12:37
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
Respuesta: borde en areas de una imagen

Encontre la solución a mi problema. Pongo el link de la página en el que se explica como hacerlo.

http://www.kryogenix.org/code/browser/annimg/annimg.html

Etiquetas: bordes
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 21:57.