При наведении на ссылку отображается картинка...
Всем привет.
У меня такой вопрос, подскажите пожалуйста, как сделать так, что бы при наведении на ссылку в нужном месте отображалась картинка. Это можно и на HTML/CSS сделать. НО, нужно что бы когда с сылки убераешь курсор, картинка продолжала отображаться. HTML код таков: <a href="/link1" data-image="http://img1.jpg" class="menu">Ссылка 1</a> <a href="/link2" data-image="http://img2.jpg" class="menu">Ссылка 2</a> <a href="/link3" data-image="http://img3.jpg" class="menu">Ссылка 3</a> <img class="product-img" src=""></img> В data-image в каждой ссылке вставлена ссылка на картинку которая должна появляться. Под ссылками стоит тег img, вот в его src должна вставляться ссылка на картинку. И если курсор ссылки убираем, картинка не исчезает. Если наводим курсор на другую ссылку, то отображается другая картинка. Живой пример можно увидеть на этом сайте (в горизонтальном меню в разделе "Создай свой дизайн") За это как я понял отвечают эти скрипты:
<script>
var __customVars = [ ];
</script>
<script src="http://assets0.printio.ru/assets/all-dcf4cf6a1254bf2e645dc0a72bce94ad.js"></script>
Пытался сам разобраться в том как всё устроено, но ни чего не вышло. Прошу вашей помощи знатаки JS. |
<a href="/link1" data-image="http://img1.jpg" class="menu">Ссылка 1</a>
<a href="/link2" data-image="http://img2.jpg" class="menu">Ссылка 2</a>
<a href="/link3" data-image="http://img3.jpg" class="menu">Ссылка 3</a>
<img class="product-img" src=""></img>
<script>
$('a.menu').mouseover(function() {
var url = $(this).attr('data-image');
$('.product-img').attr('src', url);
});
</script>
|
Хех, работает! Спасибо большое!
|
| Часовой пояс GMT +3, время: 05:11. |