При наведении на ссылку отображается картинка...

[RadCor]

Всем привет.
У меня такой вопрос, подскажите пожалуйста, как сделать так, что бы при наведении на ссылку в нужном месте отображалась картинка. Это можно и на 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.

[Safort]

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

[RadCor]

Хех, работает! Спасибо большое!