Image Replacement Script with jQuery for WordPress

Here’s a script to ease the use of image replacements for WordPress users. When hovered, the src of the image will be replaced by a url which you define in the alt attribute in the image editor dialog. The image will swap without delay on a hover since the script pre-loads all of the swappable images. Once this script is in your site all you need to do is:

• Add class=”image_hover” to the image.
• Specify the URL of the swapped image in the ‘alt’ attribute. If using WordPress there’s an ‘alt’ field in the image editor dialog so it makes this easy to access.

It will apply to any image with class="image_hover" so it’s very scalable and great for sites using lots of image replacements. Using the alt attribute to store the swapped image url sort of makes sense too because it’s the alternate image.

Image Code Example

Hover over the WordPress logo below to see it magically switch between the black/white version to the color one.

<img class="image_hover" src="default_image.jpg" alt="hover_swap_image.jpg" />

The Script

Of course, you’ll need to have the jQuery library loaded up for this to work…since it’s jQuery. You can copy & paste this script directly into the of your document below the call to jQuery.js

<script>
jQuery(document).ready(function() {
  //preload each image for quick swaps
  jQuery('img.image_hover').each(function () {
  	var image_url = jQuery(this).attr('alt');
  	var image_preload = jQuery('<img />').attr('src', image_url);
  });

  //on hoverin/hoverout replace src with alt
  jQuery('img.image_hover').hover( 
  	function() {
  		var alt_url = jQuery(this).attr('alt');
  		var src_url = jQuery(this).attr('src');
  		jQuery(this).attr('src',alt_url).attr('alt',src_url);
  	},
  	function() {
  		var alt_url = jQuery(this).attr('alt');
  		var src_url = jQuery(this).attr('src');
  		jQuery(this).attr('src',alt_url).attr('alt',src_url);
  	}
  );
});
</script>

XD’s Suggestion

Optionally my friend XD provided a great script to use for those who don’t want to use the alt attribute to house the url of the swapped image. Using this method you will need to:

• Add class=”xd_image_hover” to the image.
• Give the two images the same name but append ‘-normal’ to the first image and ‘-hover’ to the swapped image. ie imagename-normal.jpg & imagename-hover.jpg

Image Code Example

Here’s a working example of XD’s alternative method:

<img class="xd_image_hover" src="imagename-normal.jpg" alt="XD's Image Replacement Script" />

The Script

<script>
/* ENABLE ROLLOVER ON TARGETED IMAGES (ALL BROWSERS) */
jQuery(document).ready(function() {
	//preload each image for quick swaps
	jQuery('img.xd_image_hover').each(function () {
  		var image_url = jQuery(this).attr('src').replace("-normal","-hover");
  		var image_preload = jQuery('<img />').attr('src', image_url);
  		alert(image_url);
  	});
  
	jQuery('img.xd_image_hover').hover( 
			function() { jQuery(this).attr("src", jQuery(this).attr("src").replace("-normal","-hover")); }, 
			function () { jQuery(this).attr("src", jQuery(this).attr("src").replace("-hover","-normal")); } 
	);  
});
</script>

I edited it slightly to use the ‘image_hover’ class name as well as to preload the image for a quick swap without waiting.