jQuery: My new plugin swapit!!!!
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.
Way to go Tony! Be sure to announce it on the mailing list and also, put a demo my man!
@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.
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)!
Need to use now
//$(this).src(a);
$(this).attr("src", a);
thank you
[…] 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. […]
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});
});
}
}
});
}
is there any demo? Would you mind sending it to my e-mail. Thanks a lot for knowledge sharing. Nice to know you ^_^