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 img s 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 img s 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

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 2

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

Answer 3

How about something like:

// Add an image to your page as:
// <img src="button.png" class="rollover">

<script type='text/javascript'>
$(document).ready(function(){
    initRollovers();
});
function initRollovers() {  
    // Assign a class to the images you want to have as roll-over enabled.
    // Example:
    // <img src="button.png" class="rollover">
    // NOTE: No "dot" when setting the class on the image... But jQuery needs the .dot in order to search for classes in this script:
    var classIdentifier = ".rollover";

    // This example assumes that only the "on" state has a suffix:
    // button.png
    // button_on.png

    // If you have a suffix for both states, edit them here:
    // button_off.png
    // button_on.png
    // ... would be edited as:
    // var offSuffix = "_off.png";
    // var onSuffix = "_on.png";

    var offSuffix = ".png";
    var onSuffix = "_on.png";

    $(classIdentifier).each(function () {

        var obj = $(this);
        var mySrcOff = obj.attr("src");
        var mySrcOn = mySrcOff.replace(offSuffix, onSuffix);
        obj.mouseout(function() {
            $(this).attr("src", mySrcOff);
        });
        obj.mouseover(function() {
            $(this).attr("src", mySrcOn);
        });

        // Preload Off State
        $('<img />').attr('src', mySrcOn).appendTo('body').css('display','none');

    });
}

</script>

.

Answer 4

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...