2012-05-15 3 views
0

가 현재 내 코드는 다음과 같습니다 이미지의 DIV 가시성 onMouseover와를 변경하려면 다음자바 스크립트 기능이

<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 --> 

각 사업부는 같은 장소에 위치. 이것을 수행하는 함수를 어떻게 만들 수 있습니까? 나는 코드가 DTD로 유효성을 검사하지 않기 때문에 물어볼 것이다. "나는 그것을 고치기를 좋아한다. 또한 div가 서로 위에 있기 때문에 하나를 볼 수있게 만들면 텍스트를 강조 표시 할 수 없다. 보이지 않는 div 뒤에 내용이 잠겨 있기 때문에 보이는 div의 내용을 볼 수 있습니다. 마지막으로, html의 함수를 onmouseover="return functionName()"으로 부르기 만하면 XHTML1.0에서 유효성이 검사됩니다. ? 난 당신이 같은 필요가 있다고 추측하고있다

+0

가 지금처럼 코드가 완전히 결함이를 – ManseUK

+0

글쎄, 난 왼쪽에 4 개 이미지가 오른쪽의 같은 위치에 4 ​​개의 div가 있습니다. 나는 왼쪽에 이미지를 마우스로 올리면 해당 이미지와 관련된 내용으로 해당 div가 표시되기를 원합니다. 마우스로 다른 이미지를 마우스로 움직이면 이전 div를 숨기고 새로운 관련 div를 볼 수있게 만들고 Z- 인덱스 맨 위로 가져옵니다. 현재 코드는 사파리에서 작동합니다. – user1395909

+0

하지만 당신의 이미지는 당신 div 안에 있습니다 - 그래서 그들은 당신이 첫번째 DIV를 mouseover하자마자 감추어 질 것입니다 ... – ManseUK

답변

1

엄격한! 당신이 실제로 달성하려고하는 무엇

<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> 
+0

정확히 내가 게시하려고했던 +1 (거의 거의 동일) – ManseUK

+0

대단히 감사합니다! 매우 도움이된다! – user1395909

관련 문제