attr(“src”).replace(～): How to Easily Implement Image Switching on Mouseover

For users visiting your website, visual feedback is highly important. Especially, changing images on mouseover can enhance user interaction. In this article, we will introduce a simple method to switch images on mouseover using jQuery’s attr(“src”).replace() method.

This method is easy to implement as it only requires preparing two patterns of images, one before the switch and one after, and changing the image file names. I hope this article will help improve the user experience on your website.

CSS for Implementing Image Switching on Mouseover

First, let’s set up the basic CSS to switch images on mouseover. The following code is a style that adjusts the layout of the entire webpage. Please adjust it as needed.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}
-->
</style>

　
This CSS removes the margins from the entire page and adjusts the font size and position of the title. Additionally, it applies a style to the element with the ID #idWrap, centering it on the page. This makes the entire page more user-friendly and allows users to intuitively understand the image switching on mouseover.

Implementing Image Switching on Mouseover with JavaScript

Next, let’s look at the JavaScript code that actually switches images on mouseover. This code uses jQuery (loading the jquery.min.js file) to dynamically change the src attribute of the images that meet specified conditions.

Prepare two patterns of images: one before the switch (btn_off.jpg) and one after (btn_on.jpg). On mouseover of an img tag in the page, the “_off” part of the file name is changed to “_ov”.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var images = $("img");
	for(var i=0; i < images.size(); i++) {
		if(images.eq(i).attr("src").match("_off.")) {
			$("img").eq(i).hover(function() {
				$(this).attr('src', $(this).attr("src").replace("_off.", "_ov."));
			}, function() {
				$(this).attr('src', $(this).attr("src").replace("_ov.", "_off."));
			});
		}
	}
});
</script>

　
This code checks whether each img tag in the page contains “_off” in its file name. If it does, it adds a mouseover event to that image, replacing “_off” with “_ov” when the mouse is over it, and switching back to “_off” when the mouse leaves.

For example, it can display btn_off.jpg normally and switch to btn_ov.jpg on mouseover. This method is simple and flexible, making it adaptable to various situations.

HTML Implementation Example

Next, let’s see an example of the HTML implementation. The following code places two images at the center of the page, with image switching on mouseover.

<div id="idWrap">
    <h1>When you hover over the images in the page, the image file name "_off" will be replaced with "_ov".<br /> and displayed.</h1>

    <div align="center"><img src="btn_off.jpg" width="300" height="120" alt="" border="0" /></div>
    <br />
    <br />
    <div align="center"><img src="btn_off.jpg" width="300" height="120" alt="" border="0" /></div>
   
</div>

　
In this HTML code, an explanation is displayed within the h1 tag inside the div tag with the ID idWrap, and images are placed below it. The align=”center” attribute is used to center the images, which switch on mouseover.

The image file name starts with btn_off.jpg, and it switches to btn_ov.jpg on mouseover. Adjust the image size and placement as necessary.

attr.replace: Demo Page for Switching Images on Mouseover

Using the method introduced here, I have created a demo page that shows the images switching on mouseover. You can check how the images switch by hovering over them in the page through the link below.

attr.replace: Demo Page for Switching Images on Mouseover

This demo page provides two types of images for each button, switching instantly on mouseover. If you are creating a page with multiple image switches, you will need to prepare two types of image files for each image, but it’s worth the effort for this feature.

Conclusion

Switching images on mouseover provides visual feedback to users, enhancing the interactivity of your website. The method introduced here is simple to implement using jQuery, so you can incorporate it right away.

By using this article as a reference, please consider incorporating mouseover image switching on your website to improve the user experience and make your website more appealing.

　
*Please use at your own risk when reusing this code.
Do not reuse the Google Analytics tag in the head section of the demo page.