Jquery Image Switch

Question

Hey guys,

I am using an image switch function in Jquery for a site I am building. There are a ton of projects so I am heavily compressing a lot of these images. Some of them however dont look nice as .gifs and it really only makes sense to make a .jpg.

My problem is that this code only swaps one image, to another image of a different name but similar prefix. Is there a way to swap just the name of the file, so that if I have a .gif, or .jpg, it wouldn't matter as it would just be swapping the name from _static to _rollover?

Here is the code I am using:

//Image Switch
$(document).ready(function(){
    $(".projectThumb img").hover(
            function(){
                    var iconName = $(this).attr("src");
                    var origin = iconName.split("_static.")[0];
                    $(this).attr({src: "" + origin + "_rollover.gif"});
            }, 
            function(){
                    var iconName = $(this).attr("src");
                    var origin = iconName.split("_rollover.")[0];
                    $(this).attr({src: "" + origin + "_static.gif"});
            });
});

and the HTML for the image switch

<div class="projectThumb">
    <img src="/img/mr_button_static.gif" class="button" name="mr">
    <p class="title">Title &ndash; Poster</p>
</div>

The image to be switched is named /img/mr_button_rollover.jpg

Thanks!

Answer 1

Just use string replacement to switch between static and rollover in the image name.

//Image Switch
$(document).ready(function(){
    $(".projectThumb img").hover(
            function(){
                    var iconName = $(this).attr("src");
                    var rollover = iconName.replace( /static/, 'rollover' );
                    $(this).attr({ src: rollover });
            }, 
            function(){
                    var iconName = $(this).attr("src");
                    var static = iconName.replace( /rollover/, 'static' );
                    $(this).attr({ src: static });
            });
});

If there is a possibility that you could static/rollover in the image prefix, simply include the underscore in the search and replace strings and match/replace the dot before the file extension.