Всем привет!Вот уже второй день мучаюсь: Как сделать чтобы при наведении на кнопки в меню у меня менялась картинка. Картинка размером: 710х410. Задается в div через css. То есть навожу на первую ссылку у меня 1 картинка, на вторую ссылку 2 картинка, и.т.д
html
<div id="page_cont"></div>
/ тут картинка.
<ul id="my_menu">
/тут меню, нужно при наведении "о нас" менялась картинка1 на 2, а когда "услуги" то на картинку 3.
<li><a href="#"><span> О НАС</span></a></li>
<li><a href="#"><span> УСЛУГИ</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, как сделать ссылками?