You are here

Blog

August 2011

jQuery Image Rollver

Posted by Jenny Mitchell on August 17, 2011 - 11:49pm

Working on a site this evening, I was looking for a way to get rid of those old Dreamweaver mmSwapImage roll-over Javascript functions. I know that Internet Exploder Explorer doesn't support the :hover pseudo-class, so using pure CSS wasn't going to work, and I was going to have to use jQuery. A quick search led me to this code snippet, which worked great.

$(document).ready(function() {
  $("img.rollover").hover(
    function() { this.src = this.src.replace("_off", "_on"); },
    function() { this.src = this.src.replace("_on", "_off"); }
  );
});

Simple, and it does exactly what I need it to do. I didn't happen to have "on" and "off" image names, I had "over" and nothing, but it's just as easy to use in any situation where the base is the same and the end is slightly different.

For a complete example and more instructions for use, check out the original post as linked below.

 

Source: http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/

Add new comment

Welcome to my blog!

Posted by Jenny Mitchell on August 17, 2011 - 9:56pm

Hello and welcome. I am a web developer and Apple consultant, and I'll be using this blog to write about some of my tips and tricks. I'll also be using it as a repository for common code and great links from other blogs. I hope you find some of the information here useful!

Add new comment