提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

通过onmouseover选项卡实现img图片的变化

实现 图片 通过 变化 img 选项卡 onmouseover
2023-06-13 09:15:17 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>选项卡实现img图片的变换</title>
<styletype="text/css">
#main{height:420px;width:400px;}
#head{
width:400px;
height:52px;
position:absolute;
left:10px;
top:-12px;
background-color:green;
}
#headli{float:left;list-style:none;width:85px;}
#content{
width:400px;
height:350px;
background-color:#FC6;
text-align:center;
position:absolute;
top:36px;
left:10px;
}
</style>
</head>

<body>
<divid="main">
<divid="head">
<ul>
<liid="tab1"onmouseover="show(1)"style="background-color:#FFF">图片一</li>
<liid="tab2"onmouseover="show(2)">图片二</li>
<liid="tab3"onmouseover="show(3)">图片三</li>
<liid="tab4"onmouseover="show(4)">图片四</li>
</ul>
</div>
<divid="content">
<pid="p1"><imgsrc="图片0"/></p>
<pid="p2"style="display:none;"><imgsrc=“图片1”></p>
<pid="p3"style="display:none;"><imgsrc="图片2"height="320px;"/></p>
<pid="p4"style="display:none;"><imgsrc="图片3"/></p>
</div>
</div>
</body>
<script>
functionshow(n){
for(vari=1;i<=4;i++){
document.getElementById("tab"+i).style.backgroundColor="green";
document.getElementById("p"+i).style.display="none";
//display实现内容的隐藏与否的控制，当为none是，隐藏
}
document.getElementById("tab"+n).style.backgroundColor="white";
document.getElementById("p"+n).style.display="block";
//当block时，隐藏的即可显示
}
</script>
</html>

相关文章