Foros del Web » Creando para Internet » CSS »

rollover en borde de imagen

Estas en el tema de rollover en borde de imagen en el foro de CSS en Foros del Web. buenas estoy tratando de que me funcione esto css: #foti img { margin: 0px 13px 12px 0; } A:link img, A:visited img { BORDER: #fff ...
  #1 (permalink)  
Antiguo 08/11/2006, 09:44
 
Fecha de Ingreso: abril-2005
Mensajes: 247
Antigüedad: 12 años, 8 meses
Puntos: 1
rollover en borde de imagen

buenas estoy tratando de que me funcione esto

css:

#foti img {
margin: 0px 13px 12px 0;
}

A:link img, A:visited img {
BORDER: #fff 1px solid;
}
A:hover img {
BORDER: #000000 1px solid;
}

htm:

<div id="foti">
<a href="#"><img src="images/photos/puno/foti1-puno.jpg" alt="puno1" border="0" /></a>
<a href="#"><img src="images/photos/puno/foti2-puno.jpg" alt="puno2" width="55" height="48" border="0" /></a>
</div>

En la primera creo los espacios para las imagenes una de otra
En las siguientes que trata sobre el link a la imagen estoy haciendo que al pasar mouse sobre la imagen cambie color de borde de blanco a negro, esto me funciona bien en firefox pero en IE no se muestra el over.

que me falta para que funcione en IE.

gracias
  #2 (permalink)  
Antiguo 08/11/2006, 10:37
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
Hola:

En explorer los pseudo estilos solo funcionan en los enlaces, y en este caso creo que sería lo mismo aplicar el efecto al link solamente (a:link, a:hover, a:visited)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 08/11/2006, 10:45
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Eso que planteas, puede que te sirva en IE7, pero en el 6 solo se pueden aplicar las seudo clases a los links (a). De todas formas como dice Caricatos, con el link solamente deben funcionar, pero te incluyo al que te servira:


#foti img {
margin: 0px 13px 12px 0;
}

a{
display: block;
}

a:link , a:visited{
border: #fff 1px solid;
}
a:hover, a:active{
border: #000000 1px solid;
}

htm:

<div id="foti">
<a href="#"><img src="images/photos/puno/foti1-puno.jpg" alt="puno1" width="55" height="48" /></a>
<a href="#"><img src="images/photos/puno/foti2-puno.jpg" alt="puno2" width="55" height="48" /></a>
</div>

Quite la propiedad border="0" del codigo HTML, si le estas diciendo que no quieres borde, luego intentas imponerselo con CSS, eso puede dar conflicto.
Pruebalo y nos dices si te funciono
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #4 (permalink)  
Antiguo 08/11/2006, 12:16
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
hola...

Fearlex: no creo que haya que agregarle display:block... ya que solo cambia la "dispocion" de los elementos, pero no es es necesario para que el hover funcione.
__________________
oohh... quisiera ser godines!!!
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 12:16.