ろーるおーばーとｊQuery。

最近ちょぴっとハマリ中のｊQueryについて流し読みしてたら面白いものを発見したのでメモφ(・・*)ゞ

オオチャクがダイスキな私がこっそりいつも使ってる
Javascriptのロールオーバー。
コレ、jQueryにしたらもっと楽なことが発覚。

ちなみに私がよくやるのは
画像の末尾で切り替えるタイプのスクリプト。
画像の名前を_onと_offにしておけば、オンマウスで
切り替えてくれるタイプ。
（私はアホなので、_on⇒_over　_off⇒_outで使ってます。。。）

▼rollover.js▼
function rollover() {
if(document.getElementsByTagName) {
  var images = document.getElementsByTagName("img");

  for(var i=0; i < images.length; i++) {
   if(images[i].getAttribute("src").match("_off."))
   {
    images[i].onmouseover = function() {
     this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
    }
    images[i].onmouseout = function() {
     this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
    }
   }
  }
}
}

if(window.addEventListener) {
window.addEventListener("load", rollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", rollover);
}

▼HTML▼
<a href="#" title="#"><img src="navi_1_off.gif" alt="OFF"></a>

これはめっちゃベンリで、いつも使ってたんだけど、
ｊQueryはもっとすごかった･･･

プラグインで、jQuery_Auto　というのを使うと、
オンマウス時の画像にだけ_overをつければ
指定ができちゃうらしいｗｗ

$.auto.hover = {

init: function() {
  $('IMG.Hover')
   .bind('mouseover', this.enter)
   .bind('mouseout', this.exit)
   .each(this.preload);
},

preload: function() {
  this.preloaded = new Image;
  this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_over$2");
},

enter: function() {
  this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_over$2");
},

exit: function() {
  this.src = this.src.replace(/^(.+)_over(\.[a-z]+)$/, "$1$2");
}
};

※コレは抜粋です。
　　　きちんとしたソースは、jQuery_Auto　に置いてあります☆

使い方としてはjquery.jsとjquery_auto.jsを読み込んでから、
HTMLのほうへはimgタグにclassを増やすだけ。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery_auto.js"></script>

<img src="sample.gif" alt="sample" class="Hover" />

読み込む画像はテキトウな名前をつけて、オンマウス時のものにはさらに_overを付加。
（同じ階層にないとNG）

• sample.gif
• sample_over.gif

プリロードも記述されてるから読み込みも早いし、
なんと言ってもラクだし、いうことなしです☆

やっぱりAjaxオモシロイｗ

と思ったお勉強タイムでした☆

ちなみにこれには他にもタブが作れたり
オートセレクトだったりが入ってました♪

時間見つけて試してみますーヽ(=´▽`=)ﾉ