1300の優良サイトを調査してみたシリーズ、第6回は「マウスオーバー・ロールオーバー」です。
画像やブロック要素などのオブジェクトは、マウスポインタが当たった際にビジュアルデザインが変化することを求められることがあります。これを広義では「マウスオーバ」といい、画像の場合は「ロールオーバ」、ハイパーリンクは「ホバー」と呼び分けをします。
ふろしき.jsの調査では、1300中189サイト(14.53%)にて対策が確認されました。
rollover.js (86件 - 6.46%)
img要素のロールオーバ処理を実装します。
- 公式サイト：http://www.dnolan.com/code/js/rollover/
- ライセンス：不明
- 開発：Daniel Nolan
smartrollover.js (37件 - 2.61%)
- 公式サイト：http://www.anchor-gr.jp/labo_opensource_smartrollover.html
- ライセンス：OSSだがライセンス表記無し(単なる無料のソフトと見なすべき)
- 開発：アンカー・グループ株式会社
jQuery Opacity Rollover (24件 - 1.84%)
透明度を利用することで、一枚の画像のみでロールオーバ処理を実現します。
- 公式サイト：http://h2ham.seesaa.net/article/124030086.html
- ライセンス：MIT License
- 開発：h2ham (日本人)
jQuery.rollover.js (13件 - 1.00%)
jQueryを利用して、img要素のロールオーバ処理を実装します。
- 公式サイト：http://rewish.jp/blog/releases/jquery_rollover
- ライセンス：MIT License
- 開発：帆秋 洋志(ほあき ひろし)
smoothrollover.js (11件 - 0.84%)
- 公式サイト：http://www.jeia.co.jp/report/2010/07/01/8/
- ライセンス：MIT License
- 開発：日本電子工藝社
jQuery Biggerlink (11件 - 0.84%)
jQueryを利用して、ブロック要素のマウスオーバ処理を実装します。
- 公式サイト：http://www.ollicle.com/projects/jquery/biggerlink/
- ライセンス：MIT License
- 開発：Oliver Boermans
rollover2.js (7件 - 0.53%)
クロスフェードなimg要素のロールオーバ処理を実装します。
- 公式サイト：http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2
- ライセンス：MIT License
- 開発：KAZUMiX
最後に
今回も、1300サイトに含まれていた全ての対策方法を紹介してみました。やっていることはシンプルですが、使われているライブラリの種類が非常に豊富なのが特徴ではないでしょうか。
流石に1300サイトを対象にしたので、網羅性は非常に高いと思いますので、悩んだ時は上記のライブラリから自分に合った物を探してみると良いでしょう。
