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函数来改变图像

回答

相关问题