highlight current and hover sprites in javascript


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. //highlight the selected navigation menu item
  2. $('#menu a.selected').each(function() {
  3. var position = $(this).css('backgroundPosition').split(' ');// ["0px", "0px"]
  4. $(this).css('background-position', '' + position[0] + ' -60px');
  5. });
  6. //setup the hover function to change the sprite for each menu item
  7. $('#menu a').hover(function () {
  8. //alert($(this).data('originalPositionX'));
  9. if($(this).data('originalPositionX')==undefined) {
  10. var position = $(this).css('backgroundPosition').split(' ');// ["0px", "0px"]
  11. $(this).data('originalPositionX', position[0]);
  12. $(this).data('originalPositionY', position[1]);
  13. }
  14. $(this).css('background-position', '' + $(this).data('originalPositionX') + ' -30px');
  15. },
  16. //revert back to the original background position
  17. function () {
  18. $(this).css('background-position', $(this).data('originalPositionX') + ' ' + $(this).data('originalPositionY'));
  19. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.