Very simple jQuery rollover

Question

I made a very simple jQuery img rollover function inspired by this one: http://www.smileycat.com/miaow/archives/000224.php.

It just check all the imgs that contain _off in their name and swap them with an img with the same name but "_on" instead of "_off".

Since I can't use background imgs in my layout, I feel that's an handy solution. But I've got the feeling that the swapping is not smooth, like if the function runs slow. What do you think? Are there ways to optimize it?

Here is the code:

    function roll_over() {
        $("img[src*='_off']").hover(
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_off", "_on");
                $(this).attr("src", stringa);
            },
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_on", "_off");
                $(this).attr("src", stringa);
            }
        );
    }

Answer 1

Repeatedly doing $("img[src*='_off']") is inefficient. It means the browser is having to search everything on a page when you roll over. You should include jQuery Lint for information about optimisation...

Answer 2

Your code is bad. Why?

1. It will fail when you'll have image like this: ...src="/images/my_office.png"...
2. You use JS for something that is so primitive that can be done in pure CSS
3. The *_on images will be loaded on mouseover event so you won't see any image for a while.

How to fix all of these issues? Use CSS Sprites.

1. Create image like this one: http://www.digart.pl/gfx/ico/s/fb.gif
2. HTML code: <a href="..." id="myId">blah</a> (of cource you don't have to use A element).

3. CSS code:

   #myId {
       display: inline-block; /* or block, or even inline with correct line-height */
       width: 33px;
       height: 20px;
       background: url(/path/to/img) 0 0 no-repeat;
   }
   #myId:hover {
       background-position: 50% 0;
   }
   

If you still want to automatize whole process then use JS only to change background position instead of image.

Answer 3

I found a good function here http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

$("#mylink img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

I just specify the id or class of imgs