Форум php программистов и начинающих

Страница 1 из 1

Форум php программистов и начинающих » Другие языки программирования » HTML/CSS/JavaScript/AJAX/jQ » [CSS]Прозрачность/Opacity

[CSS]Прозрачность/Opacity

L1nuX

Дата: Понедельник, 28.09.2009, 00:26 | Сообщение # 1

Сообщений: 18

Статус: Offline

Прозрачность картинок на сайте!Наверно многим это нравится!
Именно поэтому и выкладываю этот скрипт:

Code

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }

Вот так надо писать код картинки:<img src="your_image" class="img1">
img1
img2
img3
вы меняете сами,в зависимости от того,какая вам нужна прозрачность!
А вот и плавное изменение прозрачности(пример смотрим на ЭТОЙ странице:

Code

<html>
<head>

<style type="text/css">
     img {
       filter:alpha(opacity=30);
       -moz-opacity: 0.3;
       -khtml-opacity: 0.3;
       opacity: 0.3;
     }
</style>


<script type="text/javascript" src="/js/opacity.js"></script>

<script type="text/javascript">
     fadeOpacity.addRule('oR1', .3, 1, 30);
</script>

</head>
<body>

<img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" />
<img id="fImg2" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="/img/tomato.jpg" width="82" height="100" />
<img id="fImg3" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="/img/sweet_cherry.jpg" width="98" height="97" />

</body>
Copyright pro-php.info and tigir.com
</html>

Вот собственно и все!
Статья написана:L1nuX
Источник:pro-php.info
Источник библиотеки и графики:tigir.com

Прикрепления: opacity.js(3Kb) · 1238124.jpg(3Kb) · 8611065.jpg(2Kb) · 8026069.jpg(9Kb)