JQuery, Passing Parameters

Question

I'm working with some very basic jquery code and would like to condense what I've done into one function with passed parameters.

I have a few of these:

$(".about").hover(function() {
 $(this).attr("src","_img/nav/about_over.gif");
 }, function() {
 $(this).attr("src","_img/nav/about_off.gif");
});
$(".artists").hover(function() {
 $(this).attr("src","_img/nav/artists_over.gif");
 }, function() {
 $(this).attr("src","_img/nav/artists_on.gif");
});
$(".help").hover(function() {
 $(this).attr("src","_img/nav/help_over.gif");
 }, function() {
 $(this).attr("src","_img/nav/help_off.gif");
});

But would obviously like to pass the the title of the image ("about", artists", "help") so that I could cut down on repeated code.

Any help much appreciated.

Thanks

Ronnie

Answer 1

function hover(img) {
 $("."+img).hover(function() {
 $(this).attr("src","_img/nav/"+img+"_over.gif");
 }, function() {
 $(this).attr("src","_img/nav/"+img+"_off.gif");
 });
}

• Sean: Need to change $(class_name) to $("." + class_name)
• Peter Di Cecco: This is just changing the src attribute twice... so effectively rendering the first statement useless. You need to use a call back function for the _off.gif. See my answer.

Answer 2

You could something like this:

function ElementHover(class_name, src_over, src_off) {
 $("."+class_name+"").hover(function() {
 $(this).attr("src", src_over);
 }, function() {
 $(this).attr("src", src_off);
 });
}

Answer 3

function HoverPic(name){
 $("."+name).hover(function() {
 $(this).attr("src","_img/nav/"+name+"_over.gif");
 }, function() {
 $(this).attr("src","_img/nav/"+name+"_off.gif");
 });
}

Answer 4

I'm not sure what's going on with the second function in the hover function, but you can do something like this:

$(".about .artists .help").hover(function(){
 $(this).attr('src','_img/nav/' + $(this).attr('class') + '_over.gif')
});

you can apply the same principle to your on/off gifs too.

• rnnbrwn: I used this one, but I fixed it by changing $(".about .artists .help") to $(".about, .artists, .help") Thanks for your help, everyone.
• pal4life: Then select this as your answer.