¿Cómo oscurecer una imagen en mouseover?
Mi problema..
Tengo varias imágenes (dentro de los hipervínculos) y quiero que cada una se oscurezca al pasar el mouse (es decir, aplicar una máscara negra con alta opacidad o algo así), y luego volver a la normalidad con el mouseout. Pero no puedo encontrar la mejor manera de hacerlo.
He intentado..
Color jquery animate y algunas referencias javascript.Configuración de la opacidad de la imagen con javascript.No quiero ..
La imagen comienza con una opacidad del 80% y luego va al 100% con el mouseover (eso es fácil).Para intercambiar entre 2 imágenes (una clara y una oscura), olvidó mencionar lo siento.Reiterar..
Quiero que en la imagen (insertar un hipervínculo) se oscurezca con el mouseover y luego pierda su oscuridad con el mouseout.
¿Pensamientos?
ACTUALIZACIÓN:
Este es mi progreso de las sugerencias. Se ve bien en IE8, pero no en FF3
<html>
<body>
<a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
¿Pensamientos?
- Lee
RESPONDER
Voy con esto (parece funcionar en IE8 y FF)
<html>
<head>
<style type="text/css">
.outerLink
{
background-color:black;
display:block;
opacity:1;
filter:alpha(opacity=100);
width:200px;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>