CSS: opacity (НЕпрозвачност) при оnmouseover на картинки

  • Автор Автор mute
  • Начална дата Начална дата

mute

Registered
С този прост CSS код ще направим непрозрачна картинката при onmouseover (когато курсора премине над картинката)
Код:
<html>
<head>
<style type="text/css">

.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

</style>
</head>
<body>

<a href="http://web-tourist.net" class="opacityit"><img border="0" src="email.gif" /></a>
</body>
</html>

DEMO

тук се използват 2 опции едната е за ИЕ дригата за Мозила
filter - се използва за опацити при ИЕ и е в границите от 0 до 100 ( работи при версии 5.5+ )

-moz-opacity - работи при Mozilla и NS6+ там е в границите от 0 до 1

за сажаление този код не е валиден според w3c

ако админа сметне за добре може да се пребави при уроците мисля че е полезно
 
Екстра е с една лекичка забелжека:
mute каза:
<a href="http://web-tourist.ent" class="opacityit"><img border="0" src="email.gif" /></a>
</body>
</html>
Написал си .ent :shock:
Майче си искал .net , ама това не е важно :D
Скрипта Кърти 8)
 
и при FF работи 8)
 

Back
Горе