Change Image on Hover in JavaScript
-
Use HTML Attributes
onmouseoverandonmouseoutto Fire Functions -
Use the
.hover()Method to Change Image on Hover
In JavaScript, we follow up on some specific code block or method to perform the task of changing an image on mouse hover. Rather the efficient way is to create a user-defined function that will take account of the image source and cooperate with the mouse hover effects.
Our example sets will view one demonstration with the HTML attributes onmouseout and onmouseover to trigger certain functions in the script segment. Also, in the second instance, we will have a .hover() function associated with the jQuery.
Let’s check the code base for a clear concept.
Use HTML Attributes onmouseover and onmouseout to Fire Functions
The core working principle is based on onmouseover and onmouseout. And these attributes map to the function that has its description to change images on hover.
We will require a jQuery CDN to operate the function as it happens to rely on jQuery with .attr().
Code Snippet:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
<a href="#" id="home">
<img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
</a>
</div>
function onHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}
function offHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}
Output:
Use the .hover() Method to Change Image on Hover
This example depicts the jQuery way of dealing with the img class home. We will have the class initialized for our image source, and then we will generate the function based on necessary.
The difference with the previous one is that we did not use any HTML attribute here. Rather, we relied on the .hover() method, which works clearly.
Let’s hop onto the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div>
<img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
});
});
</script>
</body>
</html>
Output:
%20Method%20to%20Change%20Image%20on%20Hover.webp)
