[JS]IE6でも滑らかなロールオーバーを実現させるには「smoothRollOver.js」が便利｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]IE6でも滑らかなロールオーバーを実現させるには「smoothRollOver.js」が便利

jQueryプラグイン・ライブラリ Javascript・jQuery

smoothRollOver.js IE6

スポンサード

リンク画像にマウスを乗せると滑らかなロールオーバーを実現させることができるjavascript が smoothRollOver です。

ロールオーバー前と後の2種類の画像を用意して、smoothRollOver のファイルを<head> 内に読み込ませるだけで動きますし、IE6 にも対応しているので嬉しいです。

目次

1 smoothRollOver のダウンロード
2 smoothRollOver の設置
3 smoothRollOver で画像のロールオーバー
4 smoothRollOver のサンプル

smoothRollOver のダウンロード

以下のページ方smoothRollOver のファイルをダウンロードします。

smoothRollOver の設置

ダウンロードしたsmoothRollOver.js ファイルを<head> 内に設置します。

 
<script type="text/javascript" src="smoothRollOver.js"></script>

smoothRollOver で画像のロールオーバー

smoothRollOver.js を設置したら、

sample_off.jpg
sample_on.jpg

のように _off と _on の2種類の画像ファイルを用意します。
ロールオーバーで変化させる前の画像が _off、変化後の画像が _on です。

_off の画像をimgタグで読み込みます。

 
<a href="#"><img src="sample_off.jpg" /></a>

smoothRollOver のサンプル

以下のサンプル画像のように、マウスを乗せるとエフェクトが掛かります。
こちらのサンプル画像は、_on の時には Photoshop で透明度を 50% を落とした画像に切り替えています。

IE6でも滑らかなロールオーバーを実現させるには「smoothRollOver.js」が便利

こちらのサンプル画像では、マウスを乗せると背景色を青色にした _on 画像に切り替えています。

IE6でも滑らかなロールオーバーを実現させるには「smoothRollOver.js」が便利

smoothRollOver.js を使ってリンク画像部分のレイアウトが崩れる場合は、IE下位バージョンで smoothRollOver.js が正常に動かない時の対処法の記事に対処法を紹介しておりますので、合わせて参考にしてみてください。

スポンサード

コメント

コメントを残すコメントをキャンセル