图片要自己添加
<html> <head> <title></title> <style type="text/css"> a{ text-decoration : none ; background:url(MenuBg.gif) ; width : 99px ; height : 29px ; padding-top : 8px ; padding-left : 10px ; border : 0px ; lihe-height:3px; } a:hover{text-decoration : none ; background:url(MenuBg.gif) ; width : 99px ; height : 29px ; padding-top : 8px ; padding-left : 10px ; border : 0px ; lihe-height:3px;} .width{ width : 800px ;} </style> <script type="text/javascript"> function show(id){ var arr=document.getElementsByTagName("img"); for(var i=0;i<arr.length;i++){ if(i==(id-1)){ arr[i].style.display='block'; } else{ arr[i].style.display='none'; } } } </script> </head> <body> <center> <table class="width"> <tr> <td><a href="#" οnmοuseοver="show(1)">qq专区</a></td> <td><a href="#" οnmοuseοver="show(2)">时尚饰品</a></td> <td><a href="#" οnmοuseοver="show(3)">1元专区</a></td> <td><a href="#" οnmοuseοver="show(4)">彩妆</a></td> </tr> <tr> <td colspan="4"> <img src="pic1.jpg" width="750px" height="574px"/> <img src="pic2.jpg" width="750px" height="574px" style="display:none"/> <img src="pic3.jpg" width="750px" height="574px" style="display:none"/> <img src="pic4.jpg" width="750px" height="574px" style="display:none"/> </td> </tr> </table> </center> </body> </html>