Форум

Сергей545 · #1 (**permalink**) 30.11.2013, 14:41

Доброго времени суток, товарищи! Помогите пожалуйста разобраться.
Суть проблемы в следующем: имеется картинка с именем "loshad", которая плавно появляется при наведении на неё курсора мыши, и при уводе курсора с данной картинки она должна стать полностью не видимой.
Но всё бы хорошо, вот только при уводе с неё курсора, данная картинка полностью не исчезает, а остаётся видимой процентов на 10, на фоне картинки "fon" . А также ей видимость после этого уже вообще не изменяется. Если убрать фоновую картинку то всё нормально "loshad" становиться полностью не видимой.

КОД привожу ниже.

==============================================

<html>
<head >
</head>
<body style= "background-image: url('images/fon.png')" >

<script type="text/javascript">
var obj,op;

function disappear(x) {
    op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
    if(op > x) {
        clearTimeout(t);
        op -= 0.05;
        obj.style.opacity = op;
        obj.style.filter='alpha(opacity='+op*100+')';
        t2=setTimeout('disappear('+x+')',20);
    }
}

function transparent(x,x2,obj,pid)
{
    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><br><br>

<img src="images/loshad.png" style="position: absolute; z-index: 1!important; alt=; width: 731px; height: 483px;"logo" width="636" height="396" id="image_1"
onmouseover="z = new transparent(1,0.0,this); z.appear();" onMouseOut="z.disappear();">

<script type="text/javascript">
 document.getElementById('image_1').style.opacity = 0.0;
 document.getElementById('image_1').style.filter = 'alpha(opacity=1)';
 </script>
 
</body>
</html>

==========================================

Во вложении картинки с самой страницей.

рони · #2 (**permalink**) 30.11.2013, 14:49

Сергей545,
странный alt у вас в картинке

Сергей545 · #3 (**permalink**) 30.11.2013, 14:54

))) alt="logo" Съехал при редактировании, но он никак не влияет на работоспособность.

рони · #4 (**permalink**) 30.11.2013, 15:14

Сергей545,
логика непродумана --при op < 0 нужно op установить 0 и незапускать таймер иначе у вас бесконечный цикл

рони · #5 (**permalink**) 30.11.2013, 15:40

Сергей545,

<html>
<head >
<style type="text/css">
body{
 background-image: url('http://img0.liveinternet.ru/images/attach/b/3/28/942/28942996_6764184_Fon.gif')
}

</style>
</head>
<body>
<script type="text/javascript">
function transparent(x,x2,obj,pid)
{
    var t,t2;
    this.appear = function() {clearTimeout(t2);
        var op = (obj.style.opacity)?parseFloat(obj.style.opacity)*100:parseInt(obj.style.filter);

        if(op < x) {

            op += pid;
            obj.style.opacity = op/100;
            obj.style.filter='alpha(opacity='+op+')';
            t = setTimeout(arguments.callee,20);
        }
    }
    this.disappear = function() { clearTimeout(t);
        var op = (obj.style.opacity)?parseFloat(obj.style.opacity)*100:parseInt(obj.style.filter);

        if(op > x2) {

            op -= pid;
            if(op < 1) op = 0;
            obj.style.opacity = op/100;
            obj.style.filter='alpha(opacity='+op+')';
           if (op > 1) t2 = setTimeout(arguments.callee,20)
        }
    }
}
</script><br><br>

<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" style="position: absolute; z-index: 1!important; ; width: 731px; height: 483px;" alt="logo" width="636" height="396" id="image_1"
onmouseover=" z.appear();" onMouseOut="z.disappear();">

<script type="text/javascript">
 var img = document.getElementById('image_1')
 z = new transparent(100,0.0,img,2);
 img.style.opacity = 0;
 img.style.filter = 'alpha(opacity=0)';
 </script>


</body>
</html>

Сергей545 · #6 (**permalink**) 30.11.2013, 15:52

ОГРОМНОЕ ВАМ СПАСИБО!!!!!!!!!!!!!!!!! Добрый Человек!!!!!!!!!!!

рони · #7 (**permalink**) 30.11.2013, 15:57

Сергей545,
строка 34 умножение было уберите -- смотрите исправленный вариант выше

Форум

Справочник

Discord чат

Курсы javascript