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

WiL-13 · July 16, 2012

Доброго времени суток, форумчане!

Помогите пожалуйста новичку с кодом. Скомпилировал вот такую конструкцию для плавного увеличения картинки при наведении мыши -->

<html>
<head>

<script src="http://yandex.st/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>

<script type="text/javascript">
//
 $(function()
{
 $('.zoom1').hover(function(){
 $(this).children('img').stop(true,true)
 .animate({width:"200px",height:"200px",left:"-50px",top:"-50px"}, 500);
 },
 function(){
 $(this).children('img').stop(true,true)
 .animate({width:"100px",height:"100px",left:"0",top:"0"}, 500);
 });
 });
</script>

<style type="text/css">
div.zoom1 { width:100px; height:100px; position:relative; float:left; margin:100px; }
div.zoom1 img { position:relative; cursor:pointer; left:0; top:0; width:100px; height:100px; }
div.zoom1:hover { overflow:visible; visibility:hidden; }
div.zoom1:hover img { visibility:visible; position:absolute; z-index:99999; }
</style>
</head>

<body>
<div class="zoom1">
<img height="100" width="100" alt="" src="http://img.ps2netdrivers.net/img/f8/asus.p5gd2-x/mini.jpg">
</div>

<div class="zoom1">
<img height="100" width="100" alt="" src="http://img.ps2netdrivers.net/img/f8/asus.p5gd2-x/mini.jpg" style="width: 100px; display: block; height: 100px; left: 0px; top: 0px;">
</div>
</body>
</html>

Всё прекрасно работает, увеличивается/уменьшается, НО когда переношу конструкцию на сам сайт, то собственно ничего не получается - иногда картинка просто дёргается (очень быстро пропадает и исчезает при наведённом курсоре), или увеличивается, но не плавно а резко (будто на другую меняется, как эффект .hover), при уходе курсора становится другого размера, чем была прежде, и вот уже тут плавно так возвращается к своему первоначальному размеру (то есть увеличивается до первоначального размера)...

пробовал так -->

- в head прописывал эти 2 <script>

- в файл со стилями дописывал строчки из <style>

- и там где сама картинка менял код с

<div class="item-work">
<span><a class="item-link" href="url">текст</a></span>
<a class="item-link" href="url">
<img height="146" border="0" width="212" alt="" src="images/item4.jpg">
</a>
</div>

на

<div class="item-work">
<span><a class="item-link" href="url">текст</a></span>
<div class="zoom1">
<img height="146" border="0" width="212" alt="" src="images/item4.jpg">
</div>
</div>

Подскажите пожалуйста, где у меня ошибка? что делаю не так? :dash:

Edited July 17, 2012 by WiL-13

WiL-13 · July 17, 2012

проблему решил :boast:

Edited July 18, 2012 by WiL-13

Sign In

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

Question

WiL-13

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

WiL-13

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information