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

[new0111]

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

Как сделал я

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

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

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

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

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

[ksa]

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

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

[Deff]

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

[danik.js]

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

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

[SleepWalker15]

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

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

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