Изменение прозрачности при наведении
Представляю скрипт плавного изменения прозрачности баннера при наведении. При наведении курсора мышки на изображение, картинка постепенно проявляется, а когда отводим курсор мышки - постепенно угасает. Получается очень красивый эффект постепенного проявления и угасания. Также можно не использую скрипт, а только css, добиться похожего результата, но плавности уже такой не будет.
Итак начнем с установки скрипта (плавное изменение):
Код ниже вы можете разместить в "Верхнюю часть сайта"
Или перед HTML-кодом объекта, которого вы хотите изменять прозрачность (баннера например):
Код
<script language="JavaScript" type="text/javascript">
var obj,op,proc;
function disappear(x) {
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x) {
clearTimeout(t);
op -= 0.05;
proc.innerHTML = Math.round(op*10)/10*100+'%';
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
t2=setTimeout('disappear('+x+')',20);
}
}
function transparent(x,x2,obj)
{
var t,t2;
this.appear = function() {
var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op < x) {
clearTimeout(t2);
op += 0.05;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
t = setTimeout(arguments.callee,50);
}
}
this.disappear = function() {
var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x2) {
clearTimeout(t);
op -= 0.05;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
t2 = setTimeout(arguments.callee,50);
}
}
}
</script>
var obj,op,proc;
function disappear(x) {
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x) {
clearTimeout(t);
op -= 0.05;
proc.innerHTML = Math.round(op*10)/10*100+'%';
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
t2=setTimeout('disappear('+x+')',20);
}
}
function transparent(x,x2,obj)
{
var t,t2;
this.appear = function() {
var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op < x) {
clearTimeout(t2);
op += 0.05;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
t = setTimeout(arguments.callee,50);
}
}
this.disappear = function() {
var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x2) {
clearTimeout(t);
op -= 0.05;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
t2 = setTimeout(arguments.callee,50);
}
}
}
</script>
Теперь необходимо картинке или блоку присвоить необходимые свойства:
Код
<img src="ССЫЛКА_КАРТИНКИ" id="imagex1" onmouseover="z = new transparent(1,0.4,this); z.appear();" onmouseout="z.disappear();">
Итак рассмотрим поподробнее:
ССЫЛКА_КАРТИНКИ - думаю ясно (ссылка баннера и т.п.)
id="imagex1" - устанавливаем id баннеру, у второго будет imagex2
В остальное можно сильно не вникать, но нужно лишь значение 0.4
Это будет процент прозрачности после того как отводят мышь (то есть 0.4 это 40%)
Вот для наглядности код второго баннера:
Код
<img src="ССЫЛКА_КАРТИНКИ" id="imagex2" onmouseover="z = new transparent(1,0.4,this); z.appear();" onmouseout="z.disappear();">
И осталось добавить ещё один код после кода баннера,
Например сразу после него, или в "Нижнюю часть сайта"
Код
<script type="text/javascript" type="text/javascript">
for(i=1;i<=2;i++) {
alert(i);
document.getElementById('imagex'+i).style.opacity = 0.4;
document.getElementById('imagex'+i).style.filter = 'alpha(opacity=40)';
}
</script>
for(i=1;i<=2;i++) {
alert(i);
document.getElementById('imagex'+i).style.opacity = 0.4;
document.getElementById('imagex'+i).style.filter = 'alpha(opacity=40)';
}
</script>
Тоже его рассмотрим:
'imagex' это как вы надеюсь поняли id картинки (баннера) но без цифры
+i это цифра (например 1 или 2 - зависит от количества баннеров)
0.4 и 40 - процент первоначальной прозрачности картинки
Если у вас баннеров будет например 3,
То в коде ищем i<=2 и цифру 2 меняем на 3
Всё установка скрипта для плавного изменения прозрачности баннера завершена, удачи
Также вы можете обойтись без скрипта, использую только css
Для этого вставляете код ниже в "Таблицу Стилей(CSS)" в конец:
Код
#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
Заключаем счётчики или баннеры в div:
Код
<div id="banners">Тут ваши счётчики или баннеры</div>