Trying to touble-shoot hovering a picture-CodePudding

when I set the content of function to "alert();", It recognizes when I hover the image. When I implement what I wants it do, which is hover another image over the original picture. Nothing happens? If anyone could some guidance I'd appreciate it.

    <script type="text/javascript">
        function SetNewImage() 
        {
           document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
           
        }
        function SetOldImage()
        {
           document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
        }
        </script>
</head>
<body>
    <img  onm ouseover="SetNewImage()" onm ouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" />
    
</body>

CodePudding user response：

you use document.getElement by id But id not founfd

<img id="thumbnail" onm ouseover="SetNewImage()" onm ouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" />

you can try this -

<script type="text/javascript">
        function SetNewImage() 
        {
           document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
           
        }
        function SetOldImage()
        {
           document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
        }
</script>
</head>
<body>
    <img  onm ouseover="SetNewImage()" onm ouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" />
    
</body>

CodePudding user response：

use this.src=imgUrl variable to solve your problem

CodePudding user response：

try modify class to id, Class in the img and getelementbyid in JS