Используем библиотеку opacity.js
<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> </html>