ロールオーバー（プリロード対応版）

jQuery

ロールオーバーて意味がわからんかった。「画像にマウスカーソルを重ねたときに自動的に別の画像に表示を切り替える効果」だって。
今回はメニューバーに見立てたタグ群にこのロールオーバーを実装してみるらしい。

<html>
  <head>
    <style>
li{
    display:inline;    /* 横に一列に並ぶように指定。*/
    list-style-type:none;
}
img{
    border:none;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      //src属性が所定の画像へのURLと同じimgタグに対して、
      //ロールオーバーの為のイベントを登録している。
      //難しいことをしてるわけじゃないっす。
      $("img[src='http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/jquery.jpg']").mouseover(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/jquery_on.jpg")
      }).mouseout(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/jquery.jpg")
      })
    
      $("img[src='http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/javascript.jpg']").mouseover(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/javascript_on.jpg")
      }).mouseout(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/javascript.jpg")
      })
    
      $("img[src='http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/css.jpg']").mouseover(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/css_on.jpg")
      }).mouseout(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/css.jpg")
      })
    
      $("img[src='http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/html.jpg']").mouseover(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/html_on.jpg")
      }).mouseout(function(){
        $(this).attr("src","http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/html.jpg")
      })
    })
    </script>
  </head>
  <body>
    <ul>
      <!-- 
	 li要素のつなぎ部分（改行）をコメントしている。
	 これは、こうしないと要素同士が少し離れて見栄えが悪くなってしまうから。
	 まぁ〜、でも美しくないよねぇ。
	-->
      <li><a href="#"><img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/jquery.jpg" alt="jQuery" /></a></li><!-- 
      --><li><a href="#"><img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/javascript.jpg" alt="javascript" /></a></li><!--
      --><li><a href="#"><img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/css.jpg" alt="CSS" /></a></li><!--
      --><li><a href="#"><img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/html.jpg" alt="HTML" /></a></li>
    </ul>
  </body>
</html>

これ、すんごい単純なことしかしてないっす。が、単純なことしかしてないだけに冗長。
もっとシンプルなコードにできないかやってみよう。

<html>
  <head>
    <style>
li{
    display:inline;
    list-style-type:none;
}
img{
    border:none;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      //まずはimgタグ全てを初期化
      var baseUrl = "http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/"
      $("img").each(function() {
        //セレクタで取得したタグ群に対し、eachメソッドを使う。
        //んで、imgタグ全てに対して繰り返し処理をするぜ。
        var imageUrl = baseUrl + $(this).attr("id") + ".jpg"
        alert(imageUrl) //確認用。最終適には不要なので削除していいっす。
        $(this).attr("src", imageUrl)
      })

      //マウスオーバーとマウスアウトイベントにて、
      //該当imgのidを元に、適切なイメージのURLを生成してsrc属性に適用。
      $("img").mouseover(function(){
        var overImageUrl = baseUrl + $(this).attr("id") + "_on.jpg"
        $(this).attr("src", overImageUrl)
      }).mouseout(function(){
        var outImageUrl = baseUrl + $(this).attr("id") + ".jpg"
        $(this).attr("src", outImageUrl)
      })
    })
    </script>
  </head>
  <body>
    <ul>
      <li><a href="#"><img id="jquery" alt="jQuery" /></a></li><!-- 
      --><li><a href="#"><img id="javascript" alt="javascript" /></a></li><!--
      --><li><a href="#"><img id="css" alt="CSS" /></a></li><!--
      --><li><a href="#"><img id="html" alt="HTML" /></a></li>
    </ul>
  </body>
</html>

ここに記述されているサンプルは正規表現を使っている。自分が作ったサンプルコードはこれとは違うが、個人的にはさらにエレガントなコードになっているぜ！（いや、もっとエレガントなコードはあるだろうけども。。）
ま、正規表現は俺もそれなりに知ってるからいいや。


次はプリロードに対応させるぞと。

<html>
  <head>
    <style>
li{
    display:inline;
    list-style-type:none;
}
img{
    border:none;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      var baseUrl = "http://editors.ascii.jp/m-kobashigawa/jquery_sample/017/images/"
      $("img").each(function() {
        var imageUrl = baseUrl + $(this).attr("id") + ".jpg"
        $(this).attr("src", imageUrl)
      }).each(function() {
        //ここでmouseover時に使用される画像をロードしておく。
        //こうするとなんでプリロードされるのかわからん。。
        var overImageUrl = baseUrl + $(this).attr("id") + "_on.jpg"
        $("<img>").attr("src", overImageUrl)
      })

      $("img").mouseover(function(){
        var overImageUrl = baseUrl + $(this).attr("id") + "_on.jpg"
        $(this).attr("src", overImageUrl)
      }).mouseout(function(){
        var outImageUrl = baseUrl + $(this).attr("id") + ".jpg"
        $(this).attr("src", outImageUrl)
      })
    })
    </script>
  </head>
  <body>
    <ul>
      <li><a href="#"><img id="jquery" alt="jQuery" /></a></li><!-- 
      --><li><a href="#"><img id="javascript" alt="javascript" /></a></li><!--
      --><li><a href="#"><img id="css" alt="CSS" /></a></li><!--
      --><li><a href="#"><img id="html" alt="HTML" /></a></li>
    </ul>
  </body>
</html>

う〜ん、このプリロードってのはjQueryの中身を見ないと、どんなご利益があるか分からんなぁ。