Cambiar color marco imagen con evento hover

fangosto
29 de Junio del 2005
¡Necesito ayuda de la buena!

Quiero que el borde de una imagen me cambie de color cuando paso el ratón por encima. He creado el siguiente código pero no va. ¿Está mal?¿Es una chapuza?¿Otra solución?

Gracias de antemano.

<html>
<head>
<title> Pruebas link sobre imagen </title>
<style type="text/css">
A.EnlaceIm:active
{
BORDER-COLOR: #00ff00;
}
A.EnlaceIm:link
{
BORDER-COLOR: #00ff00;
}
A.EnlaceIm:visited
{
BORDER-COLOR: #00ff00;
}
A.EnlaceIm:hover
{
BORDER-COLOR: #ff0000;
}
</style>
</head>
<body>
<a href="http://localhost" class="EnlaceIm" >
<img src="images/members.gif" width="69" height="70">
</a>
</body>
</html>

Caiman
29 de Junio del 2005
Cuando tu vinculas una imagen no significa que la página le ponga una línea debajo de esa imagen para saber si es un link o no, lo que tu necesitas hacer es utilizar el comando onMouseOver apra saber cuando se posicionan sobre la imagen. La propiedad hover pertenece a los link y la mayor cosa que hará será modificar la línea si la hubiese así como lo planteas.

Para cambiar el borde puedes meter la imagen dentro de una tabla con y después usar el comando onMouseOver y modificar el borde de dicha tabla.

http://www.hackerlatino.net

fangosto
29 de Junio del 2005
Gracias Caiman. Ayer estudié laposibilidad que me dabas y funciona sin problemas en IE; sin embargo en Mozilla no cambia el cursor ¿Sabés como arregrarlo? Me gusta comprobar que lo que hago funciona en ambos navegadores.

Te pongo el código:


<html>
<head>
<title> Pruebas link sobre imagen </title>
</head>
<body>
<img src="images/tarta.gif" width="35" height="35"
onmouseover ="this.style.border='2px solid #ff0000';this.style.cursor='hand'"
onmouseout ="this.style.border ='transparent';this.style.cursor='normal'"
onclick ="alert('¡¡¡ Bien pulsado!!!');">
</body>
</html>

www.fangosto.net

Caiman
29 de Junio del 2005
Mira estuve viendo tu código y esta perfecto pero en firefox tampoco pude hacerlo funcionar excepto agregando una etiqueta de link.

<A href=""><img src="D:Documents and SettingsRevMis documentosMis imágenesSonic.JPG" width="35" height="35" onmouseover ="this.style.border='2px solid #ff0000';this.style.cursor='hand'" onmouseout ="this.style.border ='transparent';this.style.cursor='normal'" onclick ="alert('¡¡¡ Bien pulsado!!!');"></A>

Con esto se arregla el problema si tienes una configuracion para link, vlink y alink tendrás que ajustar el color.


http://www.hackerlatino.net


Miki
29 de Junio del 2005
No va porque está mal la hoja de estilo, los bordes por defecto no existen, solo con aplicarles color no van a aparecer, tienes que darles un estilo para que se vean. Si añades border-style:solid, por ejemplo, ya funcionará. O puedes usar la forma abreviada, ej: border: 1px solid #ff000.
De esta manera funcionará en FF e IE sin problemas; eso sí, igual quieres quitarle borde al img, que sí lo lleva por defecto al ser un enlace.