Have you ever wanted to create an interactive part of a website? Especially if you want to add an effect where a visual change occurs when the user takes an action with the mouse, using JavaScript or jQuery is common. This time, we will explain in detail how to use jQuery to switch the src attribute of an image for those who are starting to get interested in engineering or web design.
By reading this article, you will understand how to use basic JavaScript and jQuery and be able to write code and check its operation. We have also provided detailed explanations and tips to help even beginners progress smoothly, so you can learn with confidence.
Now, let’s learn through specific examples!
What is jQuery?
First, let’s briefly touch on jQuery. jQuery is a library for writing JavaScript more easily. While JavaScript itself is a powerful language, jQuery is widely used to simplify the complexities of DOM manipulation and browser compatibility. By using jQuery, you can add motion to web pages more concisely and intuitively with less code.
What are Mouseover and Mouseout?
“Mouseover” and “mouseout” are events that occur when the user hovers the mouse cursor over a specific element on a web page or when it leaves that element. By using these events, you can show some changes on the screen when the user performs a specific action. For example, you can implement effects such as switching images or changing colors.
Required Setup
To use jQuery, you first need to load the jQuery library into your web page. Typically, this library is loaded externally. You can make jQuery available by adding the following code to your HTML file.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The above code uses the jQuery hosting service provided by Google. Just add this to make jQuery available throughout the page.
Switching Images Using Mouseover and Mouseout
Let’s take a look at the actual code. First is the CSS description. Here, we set the style for the area where the image will be displayed. The area the user interacts with is defined with the class “.clMouseArea,” and its style is specified.
<style>
body {
font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
padding: 0;
margin: 0;
}
h1 {
font-size: 18px;
line-height: 1.6em;
text-align: center;
font-weight: normal;
padding: 10px 0;
}
.clWrap {
width: 700px;
margin: 0 auto;
text-align: left;
}
.clMouseArea {
width: 150px;
margin: 0 auto;
border: solid 1px #CCCCCC;
cursor: pointer;
}
</style>
This style setting adjusts the font and layout of the entire page and centers the image display area. Also, to visually indicate that the mouse cursor is over the area, the cursor changes to a “pointer” state.
Image Switching Using jQuery
Next, let’s look at the code to switch images using jQuery. Here, we use the mouseover and mouseout events for the .clMouseArea class.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".clMouseArea").live({
mouseenter: function() {
$(".clMouseArea img").hide().attr('src', 'mouseenter.jpg').fadeIn(500);
},
mouseleave: function() {
$(".clMouseArea img").hide().attr('src', 'mouseleave.jpg').fadeIn(500);
}
});
});
</script>
In this code, when the user hovers the mouse over the image area (mouseenter event), the image fades out, switches to the specified image, and then fades back in. When the mouse is removed (mouseleave event), the same process occurs, returning to the original image.
Implementation in HTML
Let’s incorporate this code into HTML. Here is an example:
<div class="clWrap">
<h1>The image below switches with mouseover (mouseenter) and mouseout (mouseleave).</h1>
<div class="clMouseArea">
<img src="nomouse.jpg" width="150" height="150" alt="Image area for mouseover" />
</div><!--/clMouseArea-->
</div><!--/clWrap-->
This code places an image inside the div element, which switches in response to mouse movements. The img tag’s src attribute is changed, creating a simple yet effective mechanism for changing the image.
Demo Page for Switching img src Using Mouseenter and Mouseleave
For those who want to try what we’ve learned so far, a demo page is available. You can check the actual operation and experience the code’s effect from the link below.
Demo: Switching img src Using Mouseenter and Mouseleave
Conclusion
In this article, we learned how to use jQuery to switch the src attribute of an image with mouseover and mouseout. This method is highly effective for adding interactive elements to web pages. It can be implemented easily with a small amount of code, so be sure to give it a try.
Additionally, you can apply this technique to add various interactions, such as changing text or button colors, not just images. The possibilities expand depending on your ideas.
Enjoy exploring various things while feeling the fun of web creation. We will continue to support your learning, so stay tuned for the next article!
※ Use at your own risk if copied. Do not use the Google Analytics tag within the head tag of the demo page.
