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 hide the ID field from the Django admin?
- It is impossible to add a non nullable field without specifying a default. Django error
- ImportError: cannot import name 'url' from 'django.conf.urls' - Django Error
- 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?
Related Article