jQueryを使った画像のロールオーバー

まさに車輪の(以下略)なんですが、

  • jQuery使う事最近多い
  • jquery_auto.js(リンク先なくなってる!)やyuga.jsを使うまでもない時もある

という事でなんとなしに書こうと思った。

こうだったらいいなと思ったこと

  • シンプル
  • 拡張子の文字数にかかわらずに動く
  • input type="image"でも動く

コード

使い方

  • 上記のスクリプトファイルを読み込ませる
  • ロールオーバー画像名は、ロールオーバー前の画像に”_o”を付けたモノを用意する
  • ロールオーバーするimgタグもしくはinputタグにclass="Over"を付ける

_oの画像にclass="Over"としててもチラチラになることはありません。
わかる人には、わかると思います。
ライセンス表記なくて、使用する時に迷ったりすることがよくあるので、
「自由に使ってくださいな」という気持ちで、コメント書いてます。
いつもは、こんなコメント書かないから、書き方正しいかどうかもわかりませんw
ここ間違っとるぞ!とかこここうやったらもっとスマートやぞ!とかあったらよろしく。
2010年1月10日追記:匿名さんのご指摘通り、jQueryの以前のバージョン用で書いてましたので、not部分の@は必要ありません。

4 comments on “jQueryを使った画像のロールオーバー

  1. 我流 on

    おー!
    丁度シンプルでプリロードしてくれるのを探してたところ!
    input=”image”に使えるのもいいですね。

    使わせてもらいます^^

    返信
  2. yohei on

    jqueryでのロールオーバーは頻繁につかってます。使いどころは重要ですよね。classあたえず画像の名前だけで判別できるやつを僕はいつもつかってますー

    また名前かえてみました

    返信
  3. 匿名 on

    jQueryで、簡単にロールオーバーと思って探してみつけました。
    とってもソースがすっきりしました。
    本当にありがとうございます。
    すでに気が付いていると思いますが、jquery-1.3.2 で動作させようとしたら、
    $('img.Over,input.Over').not("[src*='_o.']").each(function(){
    と @ をとらないとだめでした。

    返信
  4. nishiaki on

    匿名さん

    コメントありがとうございます。

    ご指摘の通りですね。

    エントリが古いのもあるので、追記とかしないとですね〜。

    きちんと見てくれる方がいらっしゃるってことはありがたいっすね〜。
    ログイン忘れちゃう位放置してますが、ちゃんとしないとっすね。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です