Javascript-форум - Увеличение размеров картинки при наведении курсором

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Увеличение размеров картинки при наведении курсором (https://javascript.ru/forum/dom-window/35656-uvelichenie-razmerov-kartinki-pri-navedenii-kursorom.html)

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

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

Как сделал я

<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 о том, что находится ли курсор ещё в пределах границы картинки или нет.

Заранее всем спасибо.

<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">

Цитата:

Сообщение от danik.js (Сообщение 235074)

<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.

<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

А возможно ли эту картинку еще и ссылкой сделать?

Добавь ей событие click...

SleepWalker15,
Или обернуть картинку в ссылку изначально

Цитата:

Сообщение от ksa

Добавь ей событие click...

Ну ты извращенец :)

Цитата:

Сообщение от danik.js (Сообщение 235128)

<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

как правильно привязывать к конкретному изображению?

Таки указать конкретное...

Увеличение картинки при наведении курсора

Вот так тоже получается
<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>