Using javascript to display text on top of an image on mouse over
<p>I am new to javascript and would like to have an image that is fully displayed but when you mouse over the image text appears over the top in a div tag and fades the image in the background.</p>

<p>This is my attempt however poor and it is not working.</p>

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

&lt;script&gt;

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

&lt;/script&gt;

&lt;div&gt;
    &lt;img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/&gt;

    &lt;div id='txt1' class='image_box_text' &gt;This is image box one&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks in advance.</p>
