Увеличение размеров картинки при наведении курсором
Задача: увеличение размеров картинки при наведении на неё курсором, если курсор выходит за пределы элемента, то размеры картинка становятся первоначальными.
Как сделал я <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">
|
Цитата:
|
<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,
Или обернуть картинку в ссылку изначально |
Цитата:
|
Цитата:
у меня после добавления скрипта на страницу все изображения себя так ведут (увеличиваются), как правильно привязывать к конкретному изображению? |
Цитата:
|
| Часовой пояс GMT +3, время: 23:56. |