Paul Paul - 29 days ago 19
HTML Question

Why is mouseover function not working

I have the simplest of codes, but I've never tried using onmouseover before, so not sure why it's not working:

<div class="play" id="buttonPlay">
<img src="Buttons/Play/playRest.png" onmouseover="this.src='Buttons/Play/playClick.png'" width="100%">
</div>


Any ideas? And what would be a good way to go about debugging it?

Answer

Try declaring your function in a script element and reference to that function instead of doing it all inline. At least that way you can set Breakpoint in the developper console of your browser and see what is happening.

<div class="play" id="buttonPlay">
    <img src="Buttons/Play/playRest.png" onmouseover="myFunction(this)" width="100%"> 
</div>
<script>
    function myFunction(element) {
        element.src='Buttons/Play/playClick.png';
    }
</script>
Comments