Нужно менять картинку в зависимости от элемента под курсором мыши (сайт, js/jquery), есть ли готовое решение?

Question

[ReDev1L]

Я мало знаком с js, ищу готовое решение, которое нужно только настроить.
Например есть 5 штук <li></li>, расположены вертикально, слева от них место под 1 картинку, в зависимости от элемента под курсором мыши, картинка меняется на ту что ассоциирована с этим элементом.

Answer 1

[ReDev1L]

если кому понадобится:

<ul id="sb_menu">
    <li><a href="linkpage.htm" class="newslink1" data-image="http://i.imgur.com/nXhvnfEb.jpg">111111111</a></li>
    <li><a href="linkpage.htm" class="newslink1" data-image="http://i.imgur.com/HDTl760b.jpg">222222222222</a></li>
    <li><a href="linkpage.htm" class="newslink1" data-image="http://i.imgur.com/V3p6K5Wb.jpg">333333333333</a></li>
    <li><a href="linkpage.htm" class="newslink1" data-image="http://i.imgur.com/fJQOD6ub.jpg">4444444444444</a></li>
    <li><a href="linkpage.htm" class="newslink1" data-image="http://i.imgur.com/n6yoEjTb.jpg">55555555555</a></li>
</ul>
<img id="story" src="http://i.imgur.com/nXhvnfEb.jpg">


<script type='text/javascript'>
$(document).ready(function() {
$('ul#sb_menu li a').hover(function(e) {
    $('#story').attr('src', $(e.target).attr('data-image'));
  });
});
</script>

Answer 2

[Trow_eu]

можно даже на css, примерно как тут, только на одно место разные блоки с картинками.
Как при помощи css , при наведении на один див появлялся другой?