p{ color:#F00;
font-size:36px;}
#aa
{
width:500px;
height:400px;
position:relative;
background-image:url(images/1.jpg);
background-size:contain;
background-repeat:no-repeat;}
</style>
<script type="text/javascript">
document.write("<p>设置一个div，准备好3张图片，设置3个按钮，分别更改不同的背景，默认是第一张（类似于QQ空间更换主题)</p><br />123456789");
</script>
</head>
<body>
<div id="aa"></div><br />
<input id="a" style="" type="button" value="第一张" onmouseover="change1()" />
<input id="b" type="button" value="第二张" onmouseover="change2()" />
<input id="c" type="button" value="第三张" onmouseover="change3()" /><br />
<br />
<img src="images/1.jpg" width="512" id="bb" /><br />
<input style="" type="button" value="第一张" onmouseover="change11()" />
<input type="button" value="第二张" onmouseover="change22()" />
<input type="button" value="第三张" onmouseover="change33()" />
</body>
</html>
<script>
var a =document.getElementById("a");
var b =document.getElementById("b");
var c =document.getElementById("c");
function change11()
{
var aa = document.getElementById("bb");
aa.src="images/1.jpg";
}
function change22()
{
var aa = document.getElementById("bb");
aa.src="images/2.jpg";
}
function change33()
{
var aa = document.getElementById("bb");
aa.src="images/3.jpg";
}
function change1()
{
var aa = document.getElementById("aa");
aa.style.backgroundImage ="url(images/1.jpg)";
a.style.backgroundColor="#6F3";
b.style.backgroundColor="#CCC";
c.style.backgroundColor="#CCC";
}
function change2()
{
var aa = document.getElementById("aa");
aa.style.backgroundImage ="url(images/2.jpg)";
b.style.backgroundColor="#6F3";
a.style.backgroundColor="#CCC";
c.style.backgroundColor="#CCC";
}
function change3()
{
var aa = document.getElementById("aa");
aa.style.backgroundImage ="url(images/3.jpg)";
c.style.backgroundColor="#6F3";
b.style.backgroundColor="#CCC";
a.style.backgroundColor="#CCC";
}
</script>