リンク画像にマウスを乗せると滑らかなロールオーバーを実現させることができるjavascriptがsmoothRollOverです。
ロールオーバー前と後の2種類の画像を用意して、smoothRollOverのファイルを<head>内に読み込ませるだけで動きますし、IE6にも対応しているので嬉しいです。
smoothRollOver のダウンロード
以下のページ方smoothRollOverのファイルをダウンロードします。http://www.jeia.co.jp/report/2010/07/01/8/
smoothRollOver の設置
ダウンロードしたsmoothRollOver.jsファイルを<head> 内に設置します。|
1 |
<script type="text/javascript" src="smoothRollOver.js"></script> |
smoothRollOver で画像のロールオーバー
smoothRollOver.js を設置したら、sample_off.jpg
sample_on.jpg
のように _off と _on の2種類の画像ファイルを用意します。
ロールオーバーで変化させる前の画像が_off、変化後の画像が_onです。
_off の画像をimgタグで読み込みます。
|
1 |
<a href="#"><img src="sample_off.jpg" /></a> |
smoothRollOver のサンプル
以下のサンプル画像のようにマウスを乗せるとエフェクトが掛かります。こちらのサンプル画像は、_onの時にはPhotoshopで透明度を50%を落とした画像に切り替えています。
こちらのサンプル画像では、マウスを乗せると背景色を青色にした _on画像に切り替えています。
smoothRollOver.jsを使ってリンク画像部分のレイアウトが崩れる場合は、IE下位バージョンで smoothRollOver.js が正常に動かない時の対処法の記事に対処法を紹介しておりますので、合わせて参考にしてみてください。
コメント