Blog

ブログ

JQuery版​smartrollover.jsを​作成しました

  • Web制作
  • 記事公開日:
JQuery版smartrollover.jsを作成しました

お仕事とかで、smartrollover.jsがよく使われるのですが、だれもJQuery版を作っていないようなので、西畑さんのソースをちょっと参考にしつつ、さくっと作成してみました。

ソースと使い方

ファイル名の末尾に「_off」とつけた画像を「_on」と命名した画像とロールオーバーするなど、smartrollover.jsと全く同じコードです。

まけ:JQueryの特性を生かして例外処理をしてみる

例外処理もしたいので、CSS3の属性セレクタを利用してちょこっと改造します。
ちなみに、実際の案件では一度も使う機会はありませんでした(笑)。

<img>要素・<input>要素で、ファイル名の末尾に「_off」とつけた画像でも、「NoEffect」というクラスをつけたらマウスオーバーしませんよ。という処理を付け加えたりします。

このコードでsmartrollover.jsと同じ挙動をします。

最終的には以下のようなコードになりました。

JQueryを使うと、CSS3の属性セレクタの記述を利用できるのでシンプルなコードで複雑なことが実現できることが多いので、活用してみてはいかがでしょうか。

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. jQuery.Pageswitch.jsを導入とjQuery.Biggerlink.jsとの共存について
    jQuery.Pageswitch.jsを導入とjQuery.Biggerlink.jsとの共存について
  2. Webデザイナーの格差が今後広がっていく
    Webデザイナーの格差が今後広がっていく
  3. @hitoriblogさん作 AppStoreHelperを導入・カスタマイズしてみました
    @hitoriblogさん作 AppStoreHelperを導入・カスタマイズしてみました
ページの上部に戻る