Как затемнить изображение при наведении курсора?
Моя проблема..
У меня есть несколько изображений (внутри гиперссылок), и я хочу, чтобы каждое из них темнело при наведении курсора мыши (то есть применяется черная маска с высокой непрозрачностью или что-то в этом роде), а затем возвращается к нормальному состоянию при наведении мыши. Но я не могу найти лучший способ сделать это.
Я пробовал..
JQuery Color Animate и некоторые ссылки на JavaScript.Установка непрозрачности изображения с помощью JavaScript.Я не хочу ..
Изображение начинается с 80% непрозрачности, а затем при наведении мыши до 100% (это легко).Чтобы поменять местами 2 изображения (одно светлое и одно темное), забыл упомянуть это извините ..Чтобы повторить..
Я хочу, чтобы изображение (включая гиперссылку) затемнялось при наведении мыши, а затем теряло свою яркость при наведении мыши.
Мысли?
ОБНОВИТЬ :
Это мой прогресс из предложений. Хорошо выглядит в IE8, но не в 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>
Мысли?
- Ли
ОТВЕТ
Я собираюсь с этим (кажется, работает в IE8 и 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>