Puki Wiki 1.4.7を設置した後にメニューを使いやすくする中で・・・
文字化け対策で使用したメニューを画像でロールオーバさせたJavascriptです

jQueryで画像のロールオーバー

参考・スクリプトサイト:jQueryでメニューなどの画像をロールオーバー
サンプル

スクリプト

下記内容をテキストエディタにコピーペーストします
「function.js」など名前を付けサイトの文字コードに合わせて保存
function.js
$.fn.rollover = function() {
   return this.each(function() {
      // 画像名を取得
      var src = $(this).attr('src');
      //すでに画像名に「_on.」が付いていた場合、ロールオーバー処理をしない
      if (src.match('_on.')) return;
      // ロールオーバー用の画像名を取得(_onを付加)
      var src_on = src.replace(/^(.+)(\.[a-z]+)$/, "$1_on$2");
      // 画像のプリロード(先読み込み)
      $('').attr('src', src_on);
      // ロールオーバー処理
      $(this).hover(
         function() { $(this).attr('src', src_on); },
         function() { $(this).attr('src', src); }
      );
   });
};

// 画像をロールオーバーする箇所を指定
$(function() {
   $('#menu img').rollover();
   $('.rollover').rollover();
   $('form input:image').rollover();
});

用意する物
画像2枚 同じフォルダに入れておくこと
ロールオーバー見本 ロールオーバー見本

サイトに呼び出しタグ等貼り付ける

jQueryはGoogleAPIから呼び出しています

ヘッダーに
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<script type="text/javascript" src="function.js"></script>

ロールオバーを設置したい場所に
投稿時
<div id="menu">
<a href="リンク先URL"><img src="1枚目の画像URL" alt="画像表示されなかった場合に出る文字" width="画像横幅" height="画像盾幅" /></a>
</div>
id="menu"のmenuはスクリプト下部の「// 画像をロールオーバーする箇所を指定」内にある$(function()で指定した#menuと同じにする

これで完了です。

2011/12/23 Javascript
2012/01/08
Comments(0)
関連記事