ブログ

JQuery版smartrollover.jsを作成してみた。

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

ソースと使い方

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

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

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

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

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

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

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

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。