onmouseover and onmouseout in JavaScript example

In this article, I will show you how to use onmouseover and onmouseout in html using JavaScript. Change the image on mouse over/out using Javascript mouse events in html.

Mouseover JavaScript example:

<script type="text/javascript">
        function mouseOver() {
            document.getElementById("img").src = "images/Hydrangeas.jpg";
        }

        function mouseOut() {
            document.getElementById("img").src = "images/Tulips.jpg";
        }
    </script>

    <form id="form1" runat="server">
        <div style="border: 1px solid #d2cece; width: 500px; height: 350px; text-align: center">
            <h2>onmouseover and onmouseout javascript code </h2>
            <br />
            <a href="Onclick.html" target="_blank">
                <img border="0" alt="Visit my site!" src="images/Tulips.jpg" id="img" width="260" height="260"
                     onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
        </div>

    </form>

;

Output:

VIDEO GUIDE: