borde en areas de una imagen

[siameiz]

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??

[morior]

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

[siameiz]

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

este es el html:

Código HTML:

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

y el css es el siguiente:

Código CSS:

map area.imap{
    border:1px solid blue;
}
 

el area con el vinculo esta bien, pero no aparece ningún borde alrededor de este...

[caricatos]

Hola:

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

Saludos

[siameiz]

gracias! tiene buena pinta la verdad. a ver si lo pruebo en seguida y te comento.

[siameiz]

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??

[caricatos]

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

[siameiz]

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.

[siameiz]

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