1.使用javascript进行按钮的切换特效（这里是以图片按钮进行，图片放在images文件夹中，页面在同级目录中。）
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 切换效果 </title> 5 <script type="text/javascript"> 6 function changeleft(){ 7 var left1=document.getElementById("left1"); 8 var left2=document.getElementById("left2"); 9 var right1=document.getElementById("right1"); 10 var right2=document.getElementById("right2"); 11 var end1=document.getElementById("end1"); 12 var end2=document.getElementById("end2"); 13 14 left1.style.display="block"; 15 left2.style.display="none"; 16 right1.style.display="block"; 17 right2.style.display="none"; 18 end1.style.display="block"; 19 end2.style.display="none"; 20 } 21 function changeright(){ 22 var left1=document.getElementById("left1"); 23 var left2=document.getElementById("left2"); 24 var right1=document.getElementById("right1"); 25 var right2=document.getElementById("right2"); 26 var end1=document.getElementById("end1"); 27 var end2=document.getElementById("end2"); 28 left1.style.display="none"; 29 left2.style.display="block"; 30 right2.style.display="block"; 31 right1.style.display="none"; 32 end1.style.display="none"; 33 end2.style.display="block"; 34 } 35 </script> 36 </head> 37 38 <body> 39 <table cellpadding="0" cellspacing="0"> 40 <tr> 41 <td onmouseover="changeleft()"><input type="image" src="images/left1.jpg" id="left1"><input type="image" src="images/left2.jpg" style="display:none;" id="left2"></td> 42 <td onmouseover="changeright()"><input type="image" src="images/right1.jpg" id="right1"><input type="image" src="images/right2.jpg" style="display:none;" id="right2"></td> 43 </tr> 44 <tr> 45 <td colspan="2"><input type="image" src="images/end1.jpg" id="end1"><input type="image" src="images/end2.jpg" style="display:none;" id="end2" ></td> 46 </tr> 47 </table> 48 </body> 49 </html>
left1.jpg left2.jpg right1.jpg right1.jpg end1.jpg end2.jpg
树形菜单制作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 树形结构 </title>
<style type="text/css">
body{
font-size:13px;
line-height:20px;
}
a{
font-size: 16px;
color: #000000;
text-decoration: none;
}
a:hover{
font-size:18px;
color: #ff0000;
}
.img{
vertical-align: middle;
border="1";
}
.hidden{
list-style:none;
display:none;
}
</style>
<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none';
}else{
document.getElementById(d1).style.display='block';
}
}
</script>
</head>
<body>
<ul>
<li><input type="image" src="images/fold.gif">树形结构</li>
</ul>
<ul><a href="javascript:onclick=show('art')"><input type="image" src="images/fclose.gif" >文学作品</a>
</ul>
<ul id="art" class="hidden">
<li><input type="image" src="images/doc.gif">小说</li>
<li><input type="image" src="images/doc.gif">诗歌</li>
<li><input type="image" src="images/doc.gif">散文</li>
<li><input type="image" src="images/doc.gif">现代文</li>
</ul>
<ul>
<a href="javascript:onclick=show('min')"><input type="image" src="images/fclose.gif" >四大名著</a>
</ul>
<ul id="min" class="hidden">
<li><input type="image" src="images/doc.gif">三国演义</li>
<li><input type="image" src="images/doc.gif">西游记</li>
<li><input type="image" src="images/doc.gif">水浒传</li>
<li><input type="image" src="images/doc.gif">红楼梦</li>
</ul>
<ul>
<a href="javascript:onclick=show('shu')"><input type="image" src="images/fclose.gif" >教学书籍</a>
</ul>
<ul id="shu" class="hidden">
<li><input type="image" src="images/doc.gif">小学教材</li>
<li><input type="image" src="images/doc.gif">中学教材</li>
<li><input type="image" src="images/doc.gif">高中教材</li>
<li><input type="image" src="images/doc.gif">大学教材</li>
</ul>
<ul>
<a href="javascript:onclick=show('ba')"><input type="image" src="images/fclose.gif" >娱乐八卦</a>
</ul>
<ul id="ba" class="hidden">
<li><input type="image" src="images/doc.gif">小学教材</li>
<li><input type="image" src="images/doc.gif">中学教材</li>
<li><input type="image" src="images/doc.gif">高中教材</li>
<li><input type="image" src="images/doc.gif">大学教材</li>
</ul>
</body>
</html>