Home/ Questions/Q 6652003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:04:44+00:00

i have a single div 100px X 300px. What’s the easiest way in JavaScript

  • 0

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.

for starters i thought the following would get me started but i can’t seem to remove the image properly

    <script type="text/javascript">

        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 + ')');
        }
    </script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why don’t you use CSS instead ?
    For example:

    #div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}
    • 0