Rip's Domain

jQuery: My new plugin swapit!!!!

Posted in Jquery, SwapIt by rip747 on December 15, 2006

So I’m still trying to get over the bug hump from the last post, but while I’m waiting to work that problem out, I went ahead with my new plugin swapit.

Swapit makes swapping images and background images easy and it works like any other plugin. Below is the code:

$.fn.swapit = function(a)
{
return this.each(function()
{
var i = (new Image).src = a;
var i2;
var c;
// bind the mouseover and mouseout event to swap the images
if($(this).get(0).tagName.toUpperCase() == “IMG”)
{
i2 = $(this).attr(“src”);

$(this).mouseover(function(i2)
{
$(this).attr(“src”, i2);
}).mouseout(function()
{
$(this).attr(“src”, a);
});
}else{
i2 = $(this).css(“background-image”);
$(this).mouseover(function()
{
c = “url(” + a + “)”;
$(this).css({“background-image”:c});
}).mouseout(function(){
$(this).css({“background-image”:i2});
});
}
});
}

The following shows how to use it with a div and an img tag:

$(function(){
$(“#test”).swapit(“b-aboutus-over.jpg”);
$(“.over”).swapit(“b-contactus-over.jpg”)
});

<div id=”test” style=”background-image:url(b-aboutus.jpg);”></div>
<img src=”b-contactus.jpg” class=”over”>Like always, tell me what I’m doing wrong or how I can improve the plugin. I’ll be posting it to jQuery.com and getjuqery.org sometime tonight.

7 Responses

Subscribe to comments with RSS.

  1. Rey Bango said, on December 15, 2006 at 8:57 pm

    Way to go Tony! Be sure to announce it on the mailing list and also, put a demo my man!

  2. rip747 said, on December 15, 2006 at 9:24 pm

    @Rey,

    Thanks man. I need some cheerleaders since I have no idea WTF I’m doing :).

    When you say the mailing list, are you talking about the one on Nabble? Man I’m drunk. whoops didn’t mean to type that. Anywho. After soberity kicks in I will be creating a page on jquery.com for this. Hopefully someone will help me optimize it a little.

    BTW. What is your blog address, I would like to put a link to it if I may.

  3. Rey Bango said, on December 16, 2006 at 2:11 pm

    Hey Tony,

    haha! Hopefully the ill effects of alcohol have subsided by now. đŸ˜‰

    You can post it via Nabble or sign up for the mailing list here:

    http://jquery.com/discuss/

    The mailing list is like cf-talk for jQuery and is the same content as displayed on the Nabble forum. I just like the mailing list because I see new topics as they come in vs. having to go to the forum.

    My blog is http://www.reybango.com (thanks for the link man)!

  4. toutati said, on January 29, 2007 at 5:29 pm

    Need to use now


    //$(this).src(a);
    $(this).attr("src", a);

    thank you

  5. […] February 6th, 2007 Quiet little post. I’ve fixed several bugs in SwapIt! and updated it to support jQuery 1.1. You can find it here. […]

  6. Geoff Ford said, on May 22, 2007 at 12:07 am

    I modified your plugin so that you can do multiple items at once – like a whole navigation bar. You just specify the difference to the rollover image.
    eg. Original = home.gif, rollover = home_over.gif so you would pass in “_over”. This way for every element you just add class=”swapme” and then use

    $(‘.swapme’).swapme(‘_over’);

    Below is the modification

    $(‘.swapme’).swapme(‘_over’);

    $.fn.swapme = function(a){
    return this.each(function(){
    // bind the mouse events
    if($(this).get(0).tagName.toUpperCase() == ‘IMG’){
    var original = $(this).attr(“src”);
    if(original.indexOf(‘_over’) == -1){
    // get the new src string
    var over = original.split(‘.’);
    if(over.length >= 2){
    // add before the extension if we have one
    over[over.length-2] += a;
    over = over.join(‘.’);
    } else {
    over = original + a;
    }

    $(this).mouseover(function(){
    $(this).attr(‘src’, over);
    }).mouseout(function(){
    $(this).attr(‘src’, original);
    });
    }
    } else {
    var original = $(this).css(“background-image”);
    if(original.indexOf(‘_over’) == -1){
    // get the new src string
    var over = original.split(‘.’);
    if(over.length >= 2){
    // add before the extension if we have one
    over[over.length-2] += a;
    over = over.join(‘.’);
    } else {
    over = original + a;
    }

    $(this).mouseover(function(){
    $(this).css({“background-image”: over});
    }).mouseout(function(){
    $(this).css({“background-image”: original});
    });
    }
    }
    });
    }

  7. hanum said, on October 13, 2009 at 9:26 am

    is there any demo? Would you mind sending it to my e-mail. Thanks a lot for knowledge sharing. Nice to know you ^_^


Leave a comment