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:
Post your comments / questions
Recent Article
- How to Enable Virtualization in BIOS Security Settings in Intel Processors For Android Studio?
- Dependency 'androidx.activity:activity:1.8.0' requires libraries and applications that depend on it.
- AttributeError: 'NoneType' object has no attribute 'get_text' - Python
- ModuleNotFoundError: No module named 'openpyxl' - Python
- How to get thumbnail from vimeo video URL in Python?
- Remove all special characters, punctuation except spaces from string - Python
- OSError: cannot write mode RGBA as JPEG- Python
- expected str, bytes or os.PathLike object, not JpegImageFile - Python
Related Article