ブログが巻き戻りました…。
困った。

意外とよく使うJavascript　ロールオーバー

2008.8.5 火曜日

(※googleさんのキャッシュから復旧)

小物系です。
ごくありふれたコードだけど、出番は多いので持っておくと便利だし、ってことで。

ロールオーバーイメージの動作自体は、DreamWerverの「スワップイメージ」で簡単に実装できるので、デザイナーさんとかはそっちを昔からよく使ってたけど、
HTMLのソースがかなり凄いことになるので、後で困ることが多いし…。
(ページ更新時、に挿入されたプリロードイメージが、使わなくなった画像の分まで残ったままになってたりとかよくある)
つうことで、なるべくHTML側のソースを汚さない形で作った物を使って貰ってます。

サンプル

ページのロード時に、<img>タグにclass=”rollover”とつけてある物を抽出して、
ファイル名に「_on」がついた画像を裏でプリロード(事前読み込み)しておき、マウスオーバー時に画像差し替え。
(sample.gif→sample_on.gif　sample.jpg→sample_on.jpg)

下記、jQuery併用版とスタンドアロン版があるけど、動きは全く同じ。
こうやって見比べると、jQueryとかってやっぱり便利だなぁって改めて実感…。

jQueryと併用版

他でjQuery使ってる場合とかは主にこっち。

使用方法

  1. <html>
  2. <head>
  3. <script language="javascript" src="jquery.js" type="text/javascript"></script>
  4. <script language="javascript" src="jquery.rollover.js" type="text/javascript"></script>
  5. </head>
  6.  
  7. <body>
  8. <!-- マウスオーバー時にsample_on.gifに差し替え-->
  9. <img src="sample.gif" alt="test" class="rollover"></div>
  10. </body>
  11. </html>

スクリプト

Download: jquery.rollover.js
  1. var preLoadImg = new Object();
  2.  
  3. function initRollOvers(){
  4.     $("img.rollover").each(function(){
  5.         var imgSrc = this.src;
  6.         var sep = imgSrc.lastIndexOf('.');
  7.         var onSrc = imgSrc.substr(0, sep) + '_on' + imgSrc.substr(sep, 4);
  8.         preLoadImg[imgSrc] = new Image();
  9.         preLoadImg[imgSrc].src = onSrc;
  10.         $(this).hover(
  11.             function() { this.src = onSrc; },
  12.             function() { this.src = imgSrc; }
  13.         );
  14.     });
  15. }
  16. $(function(){
  17.     initRollOvers();
  18. });

スタンドアロン版

他のフレームワーク使ってて、jQueryとの併用はなるべく避けたい場合とか、
他にJSを使ってなくて、ロールオーバーの為だけにわざわざjQueryまで…とかそんな場合はこっち。
使用方法

  1. <html>
  2. <head>
  3. <script language="javascript" src="rollover.js" type="text/javascript"></script>
  4. </head>
  5.  
  6. <body>
  7. <!-- マウスオーバー時にsample_on.gifに差し替え-->
  8. <img src="sample.gif" alt="test" class="rollover"></div>
  9. </body>
  10. </html>

スクリプト

Download: rollover.js
  1. function initRollOvers() {
  2.     if (!document.getElementById){
  3.         return;
  4.     }
  5.    
  6.     var preLoads = new Array();
  7.     var allImages = document.getElementsByTagName('img');
  8.  
  9.     for (var i = 0; i < allImages.length; i++) {       
  10.         if (allImages[i].className == 'rollover') {
  11.             var src = allImages[i].getAttribute('src');
  12.             var ftype = src.substring(src.lastIndexOf('.'), src.length);
  13.             var oSrc = src.replace(ftype, '_on'+ftype);
  14.  
  15.             //-- スワップ元、スワップ先画像の登録
  16.             allImages[i].setAttribute('pSrc', src);
  17.             allImages[i].setAttribute('oSrc', oSrc);
  18.  
  19.             //-- イメージのプリロード
  20.             preLoads[i] = new Image();
  21.             preLoads[i].src = oSrc;
  22.  
  23.             //-- イベントの設定
  24.             allImages[i].onmouseover = function() {
  25.                 this.setAttribute('src', this.getAttribute('oSrc'));
  26.             }
  27.             allImages[i].onmouseout = function() {
  28.                 this.setAttribute('src', this.getAttribute('pSrc'));
  29.             }
  30.         }
  31.     }
  32. }
  33.  
  34. function addOnload(func){
  35.     if ( typeof window.addEventListener != "undefined" ){
  36.         window.addEventListener( "load", func, false );
  37.     }else if ( typeof window.attachEvent != "undefined" ) {
  38.         window.attachEvent( "onload", func );
  39.     }else{
  40.         if ( window.onload != null ){
  41.             var oldOnload = window.onload;
  42.             window.onload = function ( e ) {
  43.             oldOnload( e );
  44.             window[func]();
  45.         };
  46.     }else
  47.         window.onload = func;
  48.     }
  49. }
  50. addOnload(initRollOvers);

追記：2008/09/22
超暫定版！エム・アールデザイン ブログ » シンプルなコードでロールオーバーを実現する。様の方でトラックバックを頂き、そちらでの指摘で気がついたのですが、
先日データが飛んでgoogleキャッシュから復旧した際にソースが一部古くなっていたようです。
あとでコッソリ直していた、onloadのバッティングを回避する処理が無くなっていたので修正しました。

タグ: | カテゴリー: Javascript |

トラックバックURL

コメント / トラックバック 2 件

  1. 超暫定版！エム・アールデザイン ブログ ：
    2008.9.22 - 11:43 AM

    シンプルなコードでロールオーバーを実現する。

    先日、担当デザイナーの不在中、とあるサイトの修正を急遽行う事になったため、どうしたことか私におはちが回ってきた。
    今回は「急遽」のため、担当デザイナーのクセに合わせた修…

  2. M/Rdesign ：
    2008.9.25 - 2:58 PM

    わざわざご連絡ありがとうございました。

    私はデザイナー歴は10数年ほどなんですが、元々webデザイナーではないので、javascriptはとっても弱いです（苦笑）。

    今後もデザイナーを助ける有益な情報の発信を期待しております。

コメント