Как же сложно исходный код страницы просмотреть, да?
Jquery:
$(document).ready(function(){
$('#menu').click(function(){
$('#thumb').slideToggle('slow');
});
$('li img').click(function(){
var imgbg = $(this).attr('dir');
//console.log(imgbg);
$('#bg').css({backgroundImage: "url("+imgbg+")"});
});
$('#bgimage').click(function(){
$('#thumb').hide();
});
});
CSS:
#mhead{
color:#000;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
text-align: center;
font-family: georgia;
}
#container{
width: 400px;
height: 400px;}
ul{
list-style:none;
margin:0;
padding:0;
}
li{
float:left;
padding:5px;
border:solid #666 0;
cursor: pointer;
}
#menu{ cursor:pointer;
position:absolute;
z-index: 10;
}
#thumb{
margin-top: 40px;
width:290px;
height:285px;
color:#000;
box-shadow:0 0 10px #CCC;
z-index:9999;
border:solid #CCC 1px;
overflow:hidden;
position:absolute;
display:none;
}
#bgimage{
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:1;
}
#bg{background-image:url(images/1.jpg);background-size:100% auto;}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Background image change onclick using jQuery - InfoTuts</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="bg">
<div id="bgimage"></div>
<div id="mhead"> <h2>Background image change onclick using jQuery - InfoTuts</h2></div>
<div id="menu"><img src="images/bgclick.png"></div>
<div id="thumb">
<ul>
<li><img src="images/1.jpg" width="85" height="82" dir="images/1.jpg"></li>
<li><img src="images/2.jpg" width="85" height="82" dir="images/2.jpg"></li>
<li><img src="images/3.jpg" width="85" height="82" dir="images/3.jpg"></li>
<li><img src="images/4.jpg" width="85" height="82" dir="images/4.jpg"></li>
<li><img src="images/5.jpg" width="85" height="82" dir="images/5.jpg"></li>
<li><img src="images/6.jpg" width="85" height="82" dir="images/6.jpg"></li>
<li><img src="images/7.jpg" width="85" height="82" dir="images/7.jpg"></li>
<li><img src="images/8.jpg" width="85" height="82" dir="images/8.jpg"></li>
<li><img src="images/9.jpg" width="85" height="82" dir="images/9.jpg"></li>
</ul>
</div>
</body>
</html>
