Вход

Просмотр полной версии : Цикличное увеличение картинки

LaFa777
15.07.2011, 20:33
Обьясните пожалуйста, при наведении мышки на картинку она начинает циклично уменьшаться и увеличиваться одновременно, как это убрать:-? Надо чтобы она увеличивалась при наведении и уменьшалась при убирании с нее мышки
function bigPict(){
var w=document.tigr.width;
if (w>102){
document.tigr.width=w-5;
document.tigr.src="images/tigrenok.jpg"
setTimeout("bigPict()", 35)

}
if (w<302){
document.tigr.width=w+10;
document.tigr.src="images/tigrenok.jpg"
setTimeout("litlePict()", 1)

}
}

<img src="images/tigrenok.jpg" name="tigr" width="302" onMouseOver="bigPict()" onmouseover="litlePict()" >
LaFa777
15.07.2011, 20:36
Сразу извеняюсь если написал не в том подфоруме, если не правильно ,прошу перенести:)
Jude
16.07.2011, 00:37
onmouseover и onmouseout, а не onmouseover и onmouseover
LaFa777
16.07.2011, 09:16
Все равноо та же проблема осталась, видимо они оба сразу берут одно и то же значение width и пытаються в одно и то же время его изменить:(
function bigPict(){
var w=document.tigr.width;
if (w>102){
document.tigr.width=w-5;
document.tigr.src="images/tigrenok.jpg"
setTimeout("bigPict()", 35)

}
if (w<302){
document.tigr.width=w+10;
document.tigr.src="images/tigrenok.jpg"
setTimeout("litlePict()", 1)
}}
<img src="images/tigrenok.jpg" name="tigr" width="302" onMouseOver="bigPict()" onMouseOut="litlePict()" >
melky
16.07.2011, 11:52
зачем ты каждый раз изменяешь путь к картинке?

и где функция litlePict ?

вот то, что ты хотел получить (http://jsfiddle.net/yEtdb/)


<img src="http://cs5947.vkontakte.ru/u17024909/e_95a2680e.jpg" name="tigr" width="102" >

<script>
var img = document.tigr;

// можно и через html их назначить
// имена функций сохраненыв\
img.onmouseover=bigPict;
img.onmouseout=litlePict;

function bigPict(){
if (img.width<302){
img.width += 10;
setTimeout( bigPict, 10);
}
}

function litlePict(){
if (img.width>102){
img.width -= 5;
setTimeout( litlePict, 1);
}
}

</script>
LaFa777
16.07.2011, 12:29
Удивительно , но в браузере твой метод не работает:-?
А нет, твой метод работает, это я туплю, спс
AndrikUA
27.06.2012, 12:53
<script type="text/javascript">

function bigPict(i){
var a = document.getElementsByTagName('img');
if (a[i].width<300) {
a[i].width += 10;
setTimeout( bigPict, 10);
}
}

function litlePict(i){
var b = document.getElementsByTagName('img')
if (b[i].width>100){
b[i].width -= 5;
setTimeout( litlePict, 1);
}
}
</script>
</head>
<body>
<img id="img1" src="cat.jpg" onmouseover="bigPict(0)" onmouseout="litlePict(0)" width="100" >
<img id="img2" src="car.jpg" onmouseover="bigPict(1)" onmouseout="litlePict(1)" width="100" >
</body>

Не могу понять в чем ошибка! Изображение увеличивается при кожном наведении только один раз на 10px.

Не могу понять в чем загвостка! Помогите пожалуйста!
melky
27.06.2012, 13:36
setTimeout( bigPict, 10);
// заменить на
setTimeout(function() { bigPict(i) }, 10);

с littlePict по аналогии