jQuery is a very versatile library when it comes to manipulating the DOM and proved to be instrumental in creating an image mouseover script recently for a friend’s website. I feel as though what I created is rather elegant, so I decided to explain how to create it below.

About 8 – 10 years ago, I remember having to create an image mouseover script about which involved about 50 lines of JavaScript and using inline onClick. To say the least, it was messy and you can achieve something similar with about only 8 lines of code!

I will be using two different images for the mouseover:
tv_off.gif and tv_on.gif

  1. First, create the HTML
    [html]
    <ul>
    <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
    </ul>
    [/html]
  2. Select the .mainnav class and attach a hover event handler to it.
    [js]
    $(".mainnav").hover(
    function () {
    },
    function () {
    }
    );
    [/js]
  3. Setup a variable called imgPath and assign the src of the image
    [js]
    $(".mainnav").hover(
    function () {
    // Grab the source
    var imgPath = $(this).attr("src");
    },
    function () {
    // Grab the source
    var imgPath = $(this).attr("src");
    }
    );
    [/js]
  4. The last step involves using the replace JavaScript method to find the string “off” and replace it with “on” and vice versa for hover on/off.
    [js]
    $(".mainnav").hover(
    function () {
    // Grab the source
    var imgPath = $(this).attr("src");
    // Replace the path in the source
    $(this).attr("src",imgPath.replace("off", "on"));
    },
    function () {
    // Grab the source
    var imgPath = $(this).attr("src");
    // Replace the path in the source
    $(this).attr("src",imgPath.replace("on", "off"));
    }
    );
    [/js]

    It’s that easy!

Categories: jQueryOpen SourceWeb

2 thoughts on “Building a better image mouseover using jQuery”

Bill · March 16, 2011 at 12:20 pm

Your script won't work if the image name itself contains texts "on" or "off". It would be better if you can store the mouseover and mouseout image names as data attributes for the img tag.

    jrutter · March 19, 2011 at 7:55 am

    Good point, I will work on a fix for this and make an update!

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…