При наведении на меню меняется картинка.
 

Всем привет!Вот уже второй день мучаюсь: Как сделать чтобы при наведении на кнопки в меню у меня менялась картинка. Картинка размером: 710х410. Задается в div через css. То есть навожу на первую ссылку у меня 1 картинка, на вторую ссылку 2 картинка, и.т.д
html
<div id="page_cont"></div> / тут картинка.
<ul id="my_menu"> /тут меню, нужно при наведении "о нас" менялась картинка1 на 2, а когда "услуги" то на картинку 3.
<li><a href="#"><span>&nbsp;&nbsp;&nbsp;&nbsp;О НАС</span></a></li>
<li><a href="#"><span>&nbsp;&nbsp;УСЛУГИ</span></a></li>
</ul>
css
.page_cont{
background-image: url(../images/44.png);
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%;
}

Вот мне подсказали, но это неверно:
script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('#page_cont').hover(function () {
$(this).css({
'background': 'url(changed_picture.jpg) no-repeat 0 0'
});
});
});
})(jQuery)
</script>
<style>
#page_cont
{
display:inline-block;
width:710px;
height:410px;
background: url(start_picture.jpg) no-repeat 0 0;
border:1px solid red;
}
</style>

Тут при наведении на div, как сделать ссылками?

<div id="page_cont">123</div>
<ul id="my_menu">
<li><a href="#" data-pic="somepic-1.jpg"><span>&nbsp;&nbsp;&nbsp;&nbsp;О НАС</span></a></li>
<li><a href="#" data-pic="somepic-2.jpg"><span>&nbsp;&nbsp;УСЛУГИ</span></a></li>
</ul>

$('#my_menu a').hover(function(){
  var pic = $(this).data('pic');
  $('#page_cont').css('background','url('+pic+') no repeat 0 0');
    console.log($('#page_cont'))
},
function(){
 $('#page_cont').css('background','ur(original-pic.jpg) no repeat 0 0');
    console.log(2)
}
)