2008 年 8 月 のアーカイブ

Newer Entries

意外とよく使う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 | コメント(2) »

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

2008.8.5 火曜日

えーっと。
このブログを入れているサーバ、ホスティングしてる物を分割して、色々なとこで使ってたりするのですが、
なんと不正侵入された為、急遽再セットアップすることに。

まぁ、かなり前から使ってる物なのでOSも古いし…。
RedHat7.3だったので、色々入れるのに四苦八苦した記憶があります。

そんなわけで、諸々バックアップを取った後、ホスティング業者さんが再セットアップ作業を行うことになり、
それが先ほど完了したので、各サイトを元に戻している段階なのですが…。

……
…
このサイト用のMySQLのバックアップ忘れた…。

orz

幸い、7/末頃のバックアップがあったので、それを使って戻しましたが、
ここ最近の数件分のデータが巻き戻っちゃいました。

何書いたっけ…。
手元にテキストで残しておけばよかったなぁ…。

この間で記憶に残ってるタイトル(というかそれなりにアクセスがあった物)は、
・よく使うJS ロールオーバー
・jQueryでBlackBox風コンテキストメニュー(右クリックメニュー)

あたりでしょうか。

今見てみたらロールオーバーの記事はGoogleのキャッシュで発見。
BlackBoxの方は修正箇所あるからそれ直したらまた改めて記事にしますかね…。

カテゴリー: その他 | コメント(0) »

次ページへ