Advanced Search

highlight current and hover sprites in javascript

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

Expand | Embed | Plain Text

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.