/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
//highlight the selected navigation menu item $('#menu a.selected').each(function() { var position = $(this).css('backgroundPosition').split(' ');// ["0px", "0px"] $(this).css('background-position', '' + position[0] + ' -60px'); }); //setup the hover function to change the sprite for each menu item $('#menu a').hover(function () { //alert($(this).data('originalPositionX')); if($(this).data('originalPositionX')==undefined) { var position = $(this).css('backgroundPosition').split(' ');// ["0px", "0px"] $(this).data('originalPositionX', position[0]); $(this).data('originalPositionY', position[1]); } $(this).css('background-position', '' + $(this).data('originalPositionX') + ' -30px'); }, //revert back to the original background position function () { $(this).css('background-position', $(this).data('originalPositionX') + ' ' + $(this).data('originalPositionY')); });