1.改變圖片
**css樣式**
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#all ul li{
float: left;
display: inline-block;
background-color: #CCCCCC;
margin-right: 3px;
width: 80px;
height: 20px;
text-align: center;
line-height: 20px;
}
#all ul li.change{
background-color: black;
color:white;
}
#pic{
width: 300px;
height: 200px;
clear: both;
border: 1px solid;
}
#img1{
display: block;
}
#img2,#img3,#img4{
display: none;
}
<body>
<div id="all">
<ul>
<li onmouseover="myfrist('img1')" name="a1" >牛奶</li>
<li onmouseover="myfrist('img2')" name="a1">蛋糕</li>
<li onmouseover="myfrist('img3')" name="a1">巧克力</li>
<li onmouseover="myfrist('img4')" name="a1">咖啡</li>
</ul>
</div>
<div id="pic">
<div id="img1" name="p1"><img src="img/fre_0.jpg" width="300" height="200"></div>
<div id="img2" name="p1"><img src="img/fre_1.jpg" width="300" height="200"></div>
<div id="img3" name="p1"><img src="img/fre_2.jpg" width="300" height="200"></div>
<div id="img4" name="p1"><img src="img/fre_3.jpg" width="300" height="200"></div>
</div>
</body>**script樣式**
function myfrist(ids){
var pics=document.getElementsByName("p1");
var list=document.getElementsByName("a1");
for(var i=0;i<pics.length;i++){
if(pics[i].id==ids){
pics[i].style.display="block";
list[i].className="change";
}else{
pics[i].style.display="none";
list[i].className="none";
}
}
}
2.改變內容
**css樣式**
body{
margin:0;
}
.div_bg{
background-image:url(img/bg.jpg);
background-repeat:no-repeat;
width:169px;
height:290px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
td{
font-size:12px;
line-height:20px;
color: #414141;
}
.white{font-size:12px;
color:#FFFFFF;
padding-top:2px;
cursor:pointer;
}
.white:hover{font-size:12px;
color:#FFFFFF;
padding-top:2px;
cursor:pointer;
}
a {
color: #06329b;text-decoration: none;line-height:24px;
}
a:hover {
color: #cc0000;text-decoration: none;line-height:24px;
}
.bg{background-image:url(img/menu1.gif);
background-repeat:no-repeat;
height:23px;
width:47px;
text-align:center;}
.nobg{background-image:url(img/menu2.gif);
background-repeat:no-repeat;
height:23px;
width:47px;
text-align:center;
}
#myTable{
width:145px;
margin-left:auto;
margin-right:auto;
}<body>
<div class="div_bg"><table id="myTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height:50px;" colspan="3"></td>
</tr>
<tr>
<td id="bg1" class="bg" onmouseover="show('book1')" name="a1"><a class="white" >小說</a></td>
<td id="bg2" class="nobg" onmouseover="show('book2')" name="a1"><a class="white" >非小說</a></td>
<td id="bg3" class="nobg" onmouseover="show('book3')" name="a1"><a class="white" >少兒</a></td>
</tr>
<tr>
<td colspan="3" style="padding-top:10px; padding-left:5px; text-align:left;"><div id="book1" name="p1" style="display:block;">
<a href="#" target=_blank>1.時間旅行者的妻子</a><br>
<a href="#" target=_blank>2.女心理師（下）</a><br>
<a href="#" target=_blank>3.鬼吹燈之精絕古城</a><br>
<a href="#" target=_blank>4.女心理師（上）</a><br>
<a href="#" target=_blank>5.小時候</a><br>
<a href="#" target=_blank>6.追風箏的人</a><br>
<a href="#" target=_blank>7.盜墓筆記2</a><br>
<a href="#" target=_blank>8.輸贏</a>
</div>
<div id="book2" name="p1" style="display:none;">
<a href="#" target=_blank>1.人生若只如初見</a><br>
<a href="#" target=_blank>2.高效能人士的七個..</a><br>
<a href="#" target=_blank>3.求醫不如求己</a><br>
<a href="#" target=_blank>4.人體使用手冊</a><br>
<a href="#" target=_blank>5.孩子，把你的手給我</a><br>
<a href="#" target=_blank>6.別笑！我是英文單詞書</a><br>
<a href="#" target=_blank>7.人體經絡使用手冊</a><br>
<a href="#" target=_blank>8.股市穩賺</a>
</div>
<div id="book3" name="p1" style="display:none;">
<a href="#" target=_blank>1.斯凱瑞金色童書·..</a><br>
<a href="#" target=_blank>2.哈利·波特與“混..</a><br>
<a href="#" target=_blank>3.不一樣的卡梅拉（..</a><br>
<a href="#" target=_blank>4.它們是怎麼來的</a><br>
<a href="#" target=_blank>5.五·三班的壞小子..</a><br>
<a href="#" target=_blank>6.男生日記</a><br>
<a href="#" target=_blank>7.哈利·波特與魔法石</a><br>
<a href="#" target=_blank>8.噼裏啪啦叢書(全7冊)</a>
</div></td>
</tr>
</table>
</div>
</body>**script樣式**
function show(name){
var ps=document.getElementsByName("p1");
var ass=document.getElementsByName("a1");
for(var i=0;i<ps.length;i++){
if(ps[i].id==name){
ps[i].style.display="block";
ass[i].className="bg";
}else{
ps[i].style.display="none";
ass[i].className="nobg";
}
}
}