javascriptを使用してマウスの画像上にテキストを表示

Question

javascriptを初めて使用していますが、画像が完全に表示されますが、画像の上にマウスを置いて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クラスを作成し、ホバーイベントでそれらの追加や削除をトリガーする方法があります。

ここで、このコードはアクションであります。このためhttp://jsfiddle.net/WpMGd/