Foros del Web » Creando para Internet » CSS »

mapa en imagen

Estas en el tema de mapa en imagen en el foro de CSS en Foros del Web. Bueno como alguno ya sabrá estoy en la famosa conversión tablas-divs...Mis dudas: 1. Se puede hacer un mapa de imagen en una imagen de cabecera ...
  #1 (permalink)  
Antiguo 27/10/2008, 12:31
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
mapa en imagen

Bueno como alguno ya sabrá estoy en la famosa conversión tablas-divs...Mis dudas:
1. Se puede hacer un mapa de imagen en una imagen de cabecera o es más conveniente hacer un div por mapa...
2. En mi caso había leído el truco de utilizar un <hX> para luego hacerlo transparente y poner la imagen en el .css. Sigo utilizando ese truco o no es conveniente...
3. En caso de ser conveniente así como hago el mapa de la imagen ¿en el .css?

Os ilustro el ejemplo...
Aquí, la cabecera de mi web (y la web)...
http://cursos.anfap.com/60user0874/web/es/web.html

Muchas gracias...

Aresillo!!
  #2 (permalink)  
Antiguo 28/10/2008, 06:49
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Hola chicos...
Bueno, al final lo he hecho como he creído...aunque con i.e. no se ve bien (as usual)...
Bueno, en el link de arriba tenéis la cabecera con los idiomas y el correo hecho con mapas de imagen.
En el link que os paso esta hecho con divs aunque pierde las dimensiones en i.e. Lo he hecho como mi lógica me ha dado en estos 5 días de aprendizaje de capas.
http://cursos.anfap.com/60user0874/web%20reducida/es.html

¿Que es mejor, la primera opción o la segunda?
¿Qué tengo que mejorar en la segunda para que se vea bien en i.e.?
¿Qué puedo o debo mejorar del segundo para que esté bien hecho?

Muchas gracias!

Aresillo!!
  #3 (permalink)  
Antiguo 28/10/2008, 07:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: mapa en imagen

La segunda manera es la correcta sin lugar a dudas.

Está bien hecho, sólo deberías añadir a las imágenes un "alt", el texto alternativo en caso de la imágenes estén desactivadas.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 28/10/2008 a las 09:57
  #4 (permalink)  
Antiguo 28/10/2008, 08:19
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Y cómo puedo hacer para que no se me mueva en el i.e.??
La verdad es que no sé porque la gente no deja de usarlo, al menos a nosotros nos quitaría bastantes dolores de cabeza!

Había una propiedad que era algo así como display:block o algo parecido... alguien me hecha una mano??

Aresillo!!
PD: Alguien sabe como modificar el css en el firebug y que después se guarde?

Última edición por Aresillo; 28/10/2008 a las 08:21 Razón: quiero borrarlo!!!
  #5 (permalink)  
Antiguo 28/10/2008, 08:19
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Muchas gracias Mikmoro!
Cómo puedo hacer para que no se me mueva en el i.e.??
La verdad es que no sé porque la gente no deja de usarlo, al menos a nosotros nos quitaría bastantes dolores de cabeza!

Había una propiedad que era algo así como display:block o algo parecido... alguien me hecha una mano??

Aresillo!!
PD: Alguien sabe como modificar el css en el firebug y que después se guarde?
  #6 (permalink)  
Antiguo 28/10/2008, 09:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: mapa en imagen

¿Qué significa "que no se mueva en IE"? No te entiendo.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 28/10/2008, 10:34
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Me refiero a que con el ff se ve como quiero pero con el ie el div de idiomas está un poco a la izda y el div del mail este basstante a la izda.

Gracias!
Por cierto, como se borra un mensaje propio? porque he querido borrar el duplicado pero no he podido...

Aresillo!!

Última edición por Aresillo; 28/10/2008 a las 10:40
  #8 (permalink)  
Antiguo 29/10/2008, 11:22
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Mikmoro puede ser porque lo esté viendo con IE6??
Tú ves alguna diferencia en el posicionamiento de las bolas de lenguajes y el mail entre IE y FF??

Gracias de nuevo!!

Aresillo!!
  #9 (permalink)  
Antiguo 29/10/2008, 12:15
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Gracias por las molestias Mikmoro

Ya lo he solucionado...
En vez de situar los divs en función de margin-right lo he hecho a partir del margin-left y he tenido que añadir al código: position:absolute;

¿Por qué funciona ahora?¿Cuál es el motivo?

Aresillo!!
  #10 (permalink)  
Antiguo 29/10/2008, 13:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: mapa en imagen

Ahhh, lo siento, no he estado en toda la tarde (hoy había currelo).

Me alegro de que lo hayas solucionado. No veo las modificaciones que comentas en tu página.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 29/10/2008, 13:11
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Tiene que ser el caché de ff porque acabo de mirar el css del servidor y tiene este codigo:
Código PHP:
#lang {
width:97px;
height:19px;
floatright;
margin-top13px;
margin-left894px;
position:absolute;
}
#bolas {  
float:left;

}
#bolas li {
float:left;
list-
style-typenone;
}
#bolas li a {
text-decoration:underline;
}
#mail {
width:25px;
height:21px;
float:right;
margin-top:130px;
margin-left:961px;
position:absolute;

Aresillo!!
PD: Que raro lo de ff porque a mi me pasa lo mismo, lo veo con otro css
  #12 (permalink)  
Antiguo 29/10/2008, 15:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: mapa en imagen

Ahora ya lo veo. Para colocarlo con posición absoluta, lo correcto es que le pongas position: relative; al div #contenedor, y en lugar de márgenes para el elemento de los idiomas uses los deplazamientos:

#lang {float:right;
height:19px;
position:absolute;
width:97px;
right:10px;
top:13px;

}

Supongo que no te causará problemas y es compatible con todos los navegadores.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 29/10/2008, 16:00
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Muchas gracias Mikmoro...
Mañana lo pruebo que hoy estoy medio con fiebre y llevo toda la tarde por los foros...

Aresillo!!
  #14 (permalink)  
Antiguo 30/10/2008, 01:26
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Efectivamente Mikmoro...
Desconocía los desplazamientos y son la leche!
Por cierto, te acuerdas de las barras...las establecimos con márgenes, no sería mejor hacerlo con desplazamientos??

Gracias de nuevo!!

Aresillo!!
  #15 (permalink)  
Antiguo 30/10/2008, 03:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: mapa en imagen

Cita:
Iniciado por Aresillo Ver Mensaje
Por cierto, te acuerdas de las barras...las establecimos con márgenes, no sería mejor hacerlo con desplazamientos??
No, en este caso es mejor con márgenes, en primer lugar porque para usar los deplazamientos hace falta que el elemento tenga posición relativa o absoluta, que no necesitas en tu caso, y en segundo ten en cuenta que un desplazamiento desplaza el bloque por completo y no modifica su tamaño, con lo cual sobresaldría por el otro lado, mientras que el margen en el caso que nos ocupa reduce el tamaño para dejar visible el trozo que nos interesa.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 30/10/2008, 03:50
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años, 1 mes
Puntos: 53
Respuesta: mapa en imagen

Ok muchas gracias!

Aresillo!!
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 16:29.