javascript - use single hover script for a bunch of buttons, with a variable on mouseover? -
I am trying to define a variable on a mouseover event.
The idea is that I later use that variable to replace the DIV ID, and patch a "swap-image" to create a normal mouseover script which I call a group of buttons I can use it for.
So I do not have to use this code again and again and only delete some numbers.
Will this work? I tried to do something like this:
// set variable at mouseover $ ("# world_map_8_button"). Mouseover (function () {var location = "# world_map_8";}); // Use mouse in 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 / button / map_buttons / world_map / world_map_8_button.jpg");}); }); This is some HTML code to help clean things up, all the buttons have been named in the same way.
& lt; Div id = "world_map_8_button" & gt; & Lt; Img id = "world_map_8_button_jpg" src = "img / button / map_buttons / world_map / world_map_8_button.jpg" width = "41" height = "41" alt = "" /> & Lt; / Div & gt; & Lt; Div id = "world_map_9_button" & gt; & Lt; Img id = "world_map_9_button_jpg" src = "img / button / map_buttons / world_map / world_map_9_button.jpg" width = "41" height = "41" alt = "" /> & Lt; / Div & gt; & Lt; Div id = "world_map_10_button" & gt; & Lt; Img id = "world_map_10_button_jpg" src = "img / button / map_buttons / world_map / world_map_10_button.jpg" width = "41" height = "41" alt = "" /> & Lt; / Div & gt; If I declare variables in the horrection function, it works (for MaAonnO only), but it does not make any sense and labor will not be saved ...
$ ("# 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 / button / map_buttons / world_map / world_map_8_button.jpg");});
This is a good candidate for CSS. You can have an image in both the hover and the normal picture, and then when the mouse is in the net, set the offset background.
To answer your question directly, however, you can try to do something like this:
$ ('[id $ = _ button]') . Hover (function () ($ ('#' + this.id + '_gpg') attr ('src', 'img / button / map_buttons / world_map /' + this.id + '_over.jpg') ;. }, Function () {$ ('#' + This.id + '_ jpg'). Attr ('src', 'img / buttons / map_buttons / world_map /' + this.id + '.jpg');} ); You only have to keep it on your pages, which will have to be kept in mind without having to do several script and global variables.
Comments
Post a Comment