Today, I needed to create a swap image for a left hand navigation. I am already using jQuery and I didn’t want to use Dreamweaver’s clunky image swap code. After some searching I found a great and simple snippet of code that will allow me to swap images all the images in the navigation with only 4 lines of code while using jQuery.
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
Be sure to have a naming convention with your images. Images for off states will be xxxxxx_off.jpg and the hover state xxxxxx_on.jpg. Also add the class “img-swap” to the images.
Big thanks to Design Chemical, click on the link to see their example.
Add A Comment