Search code examples
imagemouseoverhtmlappendchild

img with appendChild

If I surround an img tag with a span and put the mouseover in the span it works. If I don't have the span and just put the mouseover in the img, it doesn't (see single line of html in body).

Can I not append a child directly to an image?

<html>
<script type="text/javascript">
function showMsg(obj) {
   var spn;
   spn = document.createElement('span');
   spn.innerHTML = "test message";
   obj.appendChild(spn);
   obj.onmouseout = function() {obj.removeChild(spn)};
 }
</script>

<body>
  <img onmouseover="showMsg(this)" src="http://www.w3schools.com/jsref/smiley.gif">
<!--
  <span onmouseover="showMsg(this)"><img src="http://www.w3schools.com/jsref/smiley.gif"></span>
-->
</body>
</html>
Solution

  • No, an <img> is a void element.