javascript image rollover inside div
<p>i have a single div 100px X 300px. What's the easiest way in JavaScript so when I hover over the div i show an image and then when i leave the div the image disappears.</p>

<p>for starters i thought the following would get me started but i can't seem to remove the image properly</p>

<pre><code>    &lt;script type="text/javascript"&gt;

        function MouseOver_Event(elementId) {
            var imgToCreate = document.createElement('img');
            imgToCreate.setAttribute('id', 'imgHandle');
            imgToCreate.setAttribute('src', elementId + '.png');
            imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')');
            var targetDiv = document.getElementById(elementId);
            targetDiv.appendChild(imgToCreate);
            targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
        }
        function MouseOut_Event(elementId) {
            var imgToRemove = document.getElementById('imgHandle');
            var targetDiv = imgToRemove.parentNode();
            if (imgToRemove != null)
                targetDiv.removeChild(imgToRemove);
            targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')');
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="div1" onmouseover="MouseOver_Event(this.id)"&gt;&lt;/div&gt;
&lt;div id="div2" onmouseover="MouseOver_Event(this.id)"&gt;&lt;/div&gt;
&lt;div id="div3" onmouseover="MouseOver_Event(this.id)"&gt;&lt;img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>
