通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化

更新時(shí)間：2014年02月12日 15:29:21 作者：

這篇文章主要介紹了通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化,需要的朋友可以參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>選項(xiàng)卡實(shí)現(xiàn)img圖片的變換</title> 
<style type="text/css"> 
#main{ height:420px; width:400px;} 
#head{ 
width:400px; 
height:52px; 
position:absolute; 
left:10px; 
top: -12px; 
background-color:green; 
} 
#head li{ 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> 
<div id="main"> 
<div id="head"> 
<ul> 
<li id="tab1" onmouseover="show(1)" style="background-color:#FFF">圖片一</li> 
<li id="tab2" onmouseover="show(2)">圖片二</li> 
<li id="tab3" onmouseover="show(3)">圖片三</li> 
<li id="tab4" onmouseover="show(4)">圖片四</li> 
</ul> 
</div> 
<div id="content"> 
<p id="p1"><img src="圖片0"/></p> 
<p id="p2" style="display:none;"><img src=“圖片1”></p> 
<p id="p3" style="display:none;"><img src="圖片2" height="320px;"/></p> 
<p id="p4" style="display:none;"><img src="圖片3"/></p> 
</div> 
</div> 
</body> 
<script> 
function show(n){ 
for(var i=1;i<=4;i++){ 
document.getElementById("tab"+i).style.backgroundColor='green'; 
document.getElementById("p"+i).style.display='none'; 
//display實(shí)現(xiàn)內(nèi)容的隱藏與否的控制，當(dāng)為none是，隱藏 
} 
document.getElementById("tab"+n).style.backgroundColor='white'; 
document.getElementById("p"+n).style.display='block'; 
//當(dāng)block時(shí)，隱藏的即可顯示 
} 
</script> 
</html> 

您可能感興趣的文章:

相關(guān)文章

JavaScript中的this到底是什么(一)
JavaScript中的this總是讓人迷惑，應(yīng)該是js眾所周知的坑之一。個(gè)人也覺得js中的this不是一個(gè)好的設(shè)計(jì)，由于this晚綁定的特性，它可以是全局對(duì)象，當(dāng)前對(duì)象，或者…有人甚至因?yàn)榭哟蠖挥胻his
2015-12-12
圖片動(dòng)畫橫條廣告帶上下滾動(dòng)的JS代碼
可以自定義廣告的圖片、鏈接、長(zhǎng)、寬等。光標(biāo)移到圖片上會(huì)出現(xiàn)左右箭頭，有需要的朋友可以參考一下
2013-10-10
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)生成表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)生成表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
JavaScript中三個(gè)等號(hào)和兩個(gè)等號(hào)你了解多少
本篇文章主要介紹了js里面的==和===，== 判斷如果兩邊變量的類型不同，而 === 則不做類型轉(zhuǎn)換，有興趣的可以了解一下
2017-07-07
js如何去除數(shù)組中的empty?undefined空項(xiàng)
這篇文章主要介紹了js如何去除數(shù)組中的empty?undefined空項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
巧用數(shù)組制作圖片切換js代碼
這篇文章主要為大家詳細(xì)介紹了巧用數(shù)組制作圖片切換js實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
小程序Request的另類用法詳解
這篇文章主要介紹了小程序Request的另類用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
javascript dom追加內(nèi)容實(shí)現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的，在本文將為大家介紹下具體的使用方法，感興趣的朋友可以參考下
2013-09-09
JavaScript async/await使用詳解
任意一個(gè)名稱都是有意義的，先從字面意思來(lái)理解。async 是“異步”的簡(jiǎn)寫，而 await 可以認(rèn)為是 async wait 的簡(jiǎn)寫。所以應(yīng)該很好理解 async 用于申明一個(gè) function 是異步的，而 await 用于等待一個(gè)異步方法執(zhí)行完成
2022-12-12
JS判斷兩個(gè)時(shí)間大小的示例代碼
本篇文章只要是對(duì)JS判斷兩個(gè)時(shí)間大小的示例代碼進(jìn)行了介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01