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


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

_off を _on に置換してロールオーバー
_on 画像をプレロード


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.