JavaScript函數來改變圖像

目前我的代碼看起來像這樣的div可見的onmouseover：JavaScript函數來改變圖像

<div id="content"> 
<div id="1"> 
<img src="" alt="" onmouseover="document.getElementById('1').style.visibility = 'visible'; document.getElementById('2').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" /> 
<div id="1_content>content</div> 
</div> 

<div id="2"> 
<img src="" alt="" onmouseover="document.getElementById('2').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" /> 
<div id="2_content">content</p> 
</div> 

<div id="3"> 
<img src="" alt="" onmouseover="document.getElementById('3').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden'; document.getElementById('4').style.visibility = 'hidden';" /> 
<div id="3_content">content</div> 
</div> 

<div id="4"> 
<img src="" alt="" onmouseover="document.getElementById('4').style.visibility = 'visible'; document.getElementById('1').style.visibility = 'hidden'; document.getElementById('2').style.visibility = 'hidden'; document.getElementById('3').style.visibility = 'hidden';" /> 
<div id="4_content>content</div> 
</div> 

</div><!-- content -->

每個div都被放置在同一個地方。我將如何創建一個函數來執行此操作？我只問，因爲代碼沒有使用我正在使用的DTD進行驗證，所以我想修復它。另外，因爲div彼此重疊，所以當我讓一個人可見時，我無法突出顯示文本在可見div中，因爲它的z-index保持不變，所以內容被鎖定在一個不可見的div後面，我該如何解決這個問題？最後，我是否會簡單地在HTML中調用函數onmouseover="return functionName()"？是否會在XHTML1.0中驗證嚴格

來源

2012-05-15 user1395909

什麼是你真正想實現你的代碼，因爲它現在是完全有缺陷的 – ManseUK

好了，我在左邊4張圖片和4個div在右邊的相同位置我將鼠標懸停在左側的圖像上我希望它顯示與該圖像相關的內容的相應div。當我將鼠標懸停在不同的圖像上時，我希望它隱藏前面的div，使新的相關div可見，並將其帶到z-index的頂部。由於某種原因，當前的代碼在Safari中正常工作。 – user1395909

但是你的圖像在你的div裏 - 所以只要你把鼠標放在第一個DIV上，它們就會被隱藏起來...... – ManseUK

我猜測你需要的東西是這樣的：？！

<html><head> 
<script> 
function makeVisible(pName) 
{ 
    var item = document.getElementById(pName); 
    var contentPanel = document.getElementById("content"); 
    var contents = contentPanel.getElementsByTagName("p"); 

    for (var i = 0; i < contents.length; i++) { 
    if (contents[i] != item) { 
     contents[i].style.display = "none" 
    } 
    } 
    item.style.display = ""; 
} 
</script> 
</head> 
<body> 
<div id="content"> 
<div><img src="" alt="" onmouseover="makeVisible('p1')" /></div> 
<div><img src="" alt="" onmouseover="makeVisible('p2')" /></div> 
<div><img src="" alt="" onmouseover="makeVisible('p3')" /></div> 
<div><img src="" alt="" onmouseover="makeVisible('p4')" /></div> 

<p id="p1">content 1</p> 
<p id="p2">content 2</p> 
<p id="p3">content 3</p> 
<p id="p4">content 4</p> 

</div><!-- content --> 
</body></html>

來源

2012-05-15 11:08:52

+1正是我即將發佈（幾乎相同） – ManseUK

非常感謝！很有幫助！ – user1395909

JavaScript函數來改變圖像

回答

相關問題