Advanced Search

ロールオーバー+プレロード

/ Published in: jQuery
Save to your folder(s)
_off を　_on に置換してロールオーバー
_on 画像をプレロード

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function(){
  2. 	$('.onoff img').each(function(ev){
  3. 			preload_img(this);
  4. 			$(this).mouseover(function(ev){
  5. 				img_on(ev.target);
  6. 			}).mouseout(function(ev){
  7. 				img_off(ev.target);
  8. 			});
  9. 	});
  10. });
  11.  
  12. function img_on(tgt){
  13. 	var src=$(tgt).attr('src');
  14. 	var newsrc=src.replace("_off","_on");
  15. 	$(tgt).attr('src',newsrc);
  16. }
  17.  
  18. function img_off(tgt){
  19. 	var src=$(tgt).attr('src');
  20. 	var newsrc=src.replace("_on","_off");
  21. 	$(tgt).attr('src',newsrc);
  22. }
  23.  
  24. function preload_img(tgt){
  25. 	var src=$(tgt).attr('src');
  26. 	var newsrc=src.replace("_off","_on");
  27. 	$('<img>').attr('src', newsrc);
  28. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.