자바 스크립트를 사용하여 마우스 위에있는 이미지 위에 텍스트 표시

Question

나는 자바 스크립트를 처음 사용하여 완전히 표시되는 이미지를 갖고 싶지만 이미지 위에 마우스를 올려 놓으면 텍스트가 div 태그의 위쪽에 나타나고 사라집니다. 배경 이미지.

내 시도는 좋지 않지만 제대로 작동하지 않습니다.

<style> 
/*CSS Style sheet*/ 
div.image_box_text { 
opacity:0; 
margin-top:-25px; 
background-color:#FFF; 
} 
</style> 

<script> 

function fadeImg(obj) { 

    obj.style.opacity=0.5; 
    obj.filters.alpha.opacity=50; 
} 

function viewObj(obj1, obj2) { 

    fadeImg(obj1); 
    obj2.style.opacity=1; 
    bj2.filters.alpha.opacity=100; 
} 

</script> 

<div> 
    <img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/> 

    <div id='txt1' class='image_box_text' >This is image box one</div> 
</div> 

미리 감사드립니다.

Answer 1

---

이렇게하면 시작해야합니다.

<style> 
/*CSS Style sheet*/ 
div.image_box_text { 
opacity:0; 
margin-top:-25px; 
background-color:#FFF; 
} 
</style> 

<script> 

function fadeImg(obj) { 
    obj.style.opacity=0.5; 
} 

function viewObj(obj1, obj2_name) { 
    var obj2 = document.getElementById(obj2_name); 
    fadeImg(obj1); 
    obj2.style.opacity=1; 
} 

</script> 

먼저 viewObj에서와 같이 ID로 개체를 호출 할 수 없습니다. 해당 ID에 document.getElementById을 입력해야합니다. 다음에는 필터가 있는지 (IE에서만 가능) 확인해야합니다. 이렇게하는 더 좋은 방법은 스타일 시트에서 .faded 및 .hidden 클래스를 만들고 hover 이벤트가 추가 및 제거되도록 트리거하는 것입니다.

여기에 행동이 코드입니다 : 그것은 나를 시작하기 좋은 장소이었다 이것에 대한 http://jsfiddle.net/WpMGd/