jQuery: My new plugin swapit!!!!

December 15, 2006

So I’m still trying to get ove 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.

Possibly related posts: (automatically generated)

Posted by rip747 Filed in Jquery, SwapIt

6 Responses to “jQuery: My new plugin swapit!!!!”

  1. Rey Bango Says:
    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 Says:
    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 Says:
    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 Says:
    January 29, 2007 at 5:29 pm

    Need to use now


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

    thank you

  5. SwapIt! updated for jQuery 1.1 « Rip’s Domain Says:
    February 9, 2007 at 11:50 pm

    [...] 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 Says:
    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});
    });
    }
    }
    });
    }

Leave a Reply