画像のロールオーバーを自動化するJavascript

さて、ちょっと仕事で簡単なJavascriptを作る機会があったのでそれを公開してみる。
（記事が最近全然書けてなかったから間に合わせってわけじゃありません・・たぶん）

最近たまに思うのが、CSSで無理にロールオーバーを実装しなくてもいいんじゃないか、ということ。
背景だけを変更する、とかならむしろCSSが最適解なんだと思うのだけど、テキストごと置換してしまうような場合はJavascriptのほうが手軽だし、altも効くしいいのかなと。
Javascriptオフの人に対しては動きがなくなるけど、むしろオフの人はそういう動きを嫌っているのだからロールオーバーの効果がなくても問題ないのかなと。

Javascriptオフの場合にレイアウトが大幅に崩れてしまうような使い方はNGだと思うけど、ちょっとした利便性のための効果、くらいならJavascriptで実装してもいいと思う。

さて、前置きが長くなりましたが、作成したサンプルはこちらです。
画像のロールオーバーを自動化するJavascriptサンプル

"画像のロールオーバーを自動化する"サンプルダウンロード

実装は簡単で、javascriptを読み込ませてbodyのonloadでスクリプトを実行するだけで、指定のクラス名がついた画像に対してロールオーバーの処理を自動で付与する、というものです。

• パーマリンク
• コメント(0)
• トラックバック(0)

• <<2行追加するだけで、簡単にIE6でもmin-heightを実現する方法
• |
• 理論的なHTML構造だけで角丸背景を実装する>>