画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。

メニューやカートに入れるなどのボタンでもよく使われていますね。

画像のロールオーバーはCSSやJavaScript(jQuery)を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。

今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。

まずはサンプルを作ってみました。

1. jQueryでのロールオーバーサンプル

2.「smoothRollOver.js」を利用したロールオーバーサンプル

好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。

それぞれの設定方法は続きをご覧下さい。

→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む