После плавного появления картинка не исчезает полностью
Вложений: 2
Доброго времени суток, товарищи! Помогите пожалуйста разобраться.
Суть проблемы в следующем: имеется картинка с именем "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>
========================================== Во вложении картинки с самой страницей. |
Сергей545,
странный alt у вас в картинке |
))) alt="logo" Съехал при редактировании, но он никак не влияет на работоспособность.
|
Сергей545,
логика непродумана --при op < 0 нужно op установить 0 и незапускать таймер иначе у вас бесконечный цикл |
Сергей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,
строка 34 умножение было уберите -- смотрите исправленный вариант выше |
| Часовой пояс GMT +3, время: 22:33. |