Cambiar color marco imagen con evento hover
¡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>
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>
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
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
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
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
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
<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
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.
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.