use single hover script for a bunch of buttons, with a variable on mouseover?

I'm trying to define a variable on a mo开发者_运维知识库useover event.

The idea is that I can later use that variable to replace the DIV ID's, and "swap-image" pahts to create a generic mouseover script that I can use for a bunch of buttons.

So I don't have to use the same code over and over again and only swich out a few numbers.

Would this work? I tried something like this:

//define variable on mouseover

$("#world_map_8_button").mouseover(function() {
        var location = "#world_map_8";

    }); 


//use variable within script

   //mouse over/out swap image + 

$(location + "_button").hover(function() {
    $(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg"); 
        }, function() {
            $(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg"); 
        }); 
 });    

This is some of the html code to help things clear up, all buttons are named the same way.

    <div id="world_map_8_button">
            <img id="world_map_8_button_jpg" src="img/buttons/map_buttons/world_map/world_map_8_button.jpg" width="41" height="41"  alt="" />
        </div>

    <div id="world_map_9_button">
            <img id="world_map_9_button_jpg" src="img/buttons/map_buttons/world_map/world_map_9_button.jpg" width="41" height="41"  alt="" />
        </div>


    <div id="world_map_10_button">
            <img id="world_map_10_button_jpg" src="img/buttons/map_buttons/world_map/world_map_10_button.jpg" width="41" height="41"  alt="" />
        </div>

if I declare the variable in the HOVER function it works (only for the mouseon though) but that doesn't make any sense and wouldn't be labour saving...

$("#world_map_8_button").hover(function() {

                var location = "#world_map_8";

    $((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg"); 
        },
        function() {
            $((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg"); 
        }); 

Looking at your code I think attribute ends with selector $= will help you. You don't have to set any variable to do this, try this

$("[id$=_button]").hover(function() {
    $("#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button_over.jpg"); 
        }, function() {
            $"#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button.jpg"); 
        }); 
 }); 

This is a good candidate for CSS. You could have one image with both the hover and normal images in, and then set the background offset when the mouse hovers. W3Schools explains the technique well

To answer your question directly, however, you could try something like this:

$('[id$=_button]').hover(function() {
    $('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '_over.jpg');
}, function () {
    $('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '.jpg');
});

You would only have to put this on your page to take care of it all without having multiple scripts and global variable declarations.

No that won't work. Use jQuery's .data(); method.