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

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