Blog

ブログ

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

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

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

目次

ソースと使い方

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

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

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

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

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

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

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

このページを共有

関連記事

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

  1. MT5のプレビュー時に文字化けを防ぐ方法

    MT5のプレビュー時に文字化けを防ぐ方法

  2. SketchでUIデザイナーとエンジニアがコラボレーションするZeplinを使ってみた

    SketchでUIデザイナーとエンジニアがコラボレーションするZeplinを使ってみた

  3. 外部リンクアイコン自動挿入Scriptを原形をとどめないほどに改造してみたよ

    外部リンクアイコン自動挿入Scriptを原形をとどめないほどに改造してみたよ