Увеличивающаяся картинка

[sergey37]

Как сделать так что бы на странице была одна картинка ( картинка А с размером 20*20) и при наведении на картинку А выскакивала Картинка Б с размером 400*400 Есть готовые варианты или надо заказывать на фрилансе?

---

Вот что то наподобие как в скрипте галереи изображений на jQuery, только в галерее это же изображение увеличивается, а надо чтобы было другое.

[Admin]

Готового варианта нет, но можно сделать. На выходных попробую.

[Admin]

Итак, набросал код и вот что получилось:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<img class="first" src="small/11.png" id="large/11.png" alt="">
<img class="first" src="small/12.png" id="large/12.png" alt="">

<img class="second" src="" alt="">

<style type="text/css">
.first { width:50px; height:50px; cursor:pointer; }
.second { display:none; position:absolute; cursor:pointer; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$(".first").click(function(){
    var img_top = document.body.clientHeight/2;
    var img_left = document.body.clientWidth/2;

    $(".second").fadeIn(0).width(0).height(0).attr("src",$(this).attr("id")).offset({top: img_top, left: img_left});
    $(".second").animate({width: 400, height: 400, top: img_top - 200, left: img_left - 200 }, 800);
});

$(document).on("click",".second", function(){ $(".second").fadeOut(0); });
});
</script>

В <img class="first" src="small/11.png" id="large/11.png" alt=""> src="small/11.png" - URL маленькой картинки А, id="large/11.png" - URL выскакивающей картинки Б.

<img class="second" src="" alt=""> - оставить как есть, т.к. сюда и будут подставляться нужные URL картинки Б.

Правда сделал чтобы вторая картинка выскакивала и пропадала по клику, но переделать на наведение курсора мышки 5 сек.

[sergey37]

Попробую завтра.