'Trying to touble-shoot hovering a picture

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 class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" class="artThumb"/>
    
</body>
javascripthtmlcss


Solution 1:[1]

you use document.getElement by id But id not founfd

<img id="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" class="artThumb"/>

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 class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" class="artThumb"/>
    
</body>

Solution 2:[2]

use this.src=imgUrl variable to solve your problem

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Prakash Solanki
Solution 2 Sarfaraz khan
Solution 3 Selicens

Related Questions