Вход

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

new0111
17.02.2013, 16:57
Задача: увеличение размеров картинки при наведении на неё курсором, если курсор выходит за пределы элемента, то размеры картинка становятся первоначальными.

Как сделал я
<img src="http://..." onMouseMove='onMoveImg(this.style);' onMouseOut='onOutImg(this.style);'>


function onMoveImg(a){
if(a.pixelHeight==90){
function fun(){
if(a.pixelHeight<150){
a.pixelLeft-=2;
a.pixelTop-=2;
a.pixelWidth+=4;
a.pixelHeight+=4;
a.zIndex+=1;
setTimeout(fun,20);
}
}
fun();
}
}
function onOutImg(a){
function fun2(){
if(a.pixelHeight>90){
a.pixelLeft+=2;
a.pixelTop+=2;
a.pixelWidth-=4;
a.pixelHeight-=4;
a.zIndex-=1;
setTimeout(fun2,10);
}
}
fun2();
}


Уточнение: 90 первоначальный размер картинки, а 150 - размер, до которого увеличивается картинка.

Пробелмы: если провести курсором по картинке, то картинка всё равно увеличится до размеров 150 пикселей. Не могу сделать проверку условия в функции onMoveImg о том, что находится ли курсор ещё в пределах границы картинки или нет.

Заранее всем спасибо.
danik.js
17.02.2013, 17:38
<style>
img{
width: 90px;
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
transition: width 0.5s;
}
img:hover{
width: 150px;
}
</style>
<img src="http://img.12pings.net/wallp/optical_illusion_abstract_1280x800.jpg">
new0111
17.02.2013, 20:47
<style>
img{
width: 90px;
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
transition: width 0.5s;
}
img:hover{
width: 150px;
}
</style>
<img src="http://img.12pings.net/wallp/optical_illusion_abstract_1280x800.jpg">

Да, спасибо, конечно. Не спорю норм вариант :) Но мне надо осуществить это с помощью javаscript, да именно javаscript.
danik.js
17.02.2013, 21:02
<img src="http://img.12pings.net/wallp/optical_illusion_abstract_1280x800.jpg">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
$('img').width(90).hover(function(){
$(this).stop().animate({width: 150});
},
function(){
$(this).stop().animate({width: 90});
});
</script>
SleepWalker15
22.02.2013, 09:27
А возможно ли эту картинку еще и ссылкой сделать?
ksa
22.02.2013, 09:49
А возможно ли эту картинку еще и ссылкой сделать?
Добавь ей событие click...
Deff
22.02.2013, 10:09
SleepWalker15,
Или обернуть картинку в ссылку изначально
danik.js
22.02.2013, 12:17
Добавь ей событие click...

Ну ты извращенец :)
SleepWalker15
22.02.2013, 14:18
<img src="http://img.12pings.net/wallp/optical_illusion_abstract_1280x800.jpg">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
$('img').width(90).hover(function(){
$(this).stop().animate({width: 150});
},
function(){
$(this).stop().animate({width: 90});
});
</script>


у меня после добавления скрипта на страницу все изображения себя так ведут (увеличиваются), как правильно привязывать к конкретному изображению?
ksa
22.02.2013, 14:31
как правильно привязывать к конкретному изображению?
Таки указать конкретное...
Tat_22
04.12.2013, 15:30
Вот так тоже получается
<html>
<head>
function handlerMouseBig (){
uv.width="500";
}

function handlerMouseSmall (){
uv.width="100";
}
</script>
</head>
<body>
<img ID="uv" src="images/sheep.jpg" alt="Sheep" width="100" onmouseover="handlerMouseBig()" onmouseout="handlerMouseSmall()">
</body>
</html>