さて、ちょっと仕事で簡単なJavascriptを作る機会があったのでそれを公開してみる。
（記事が最近全然書けてなかったから間に合わせってわけじゃありません・・たぶん）
最近たまに思うのが、CSSで無理にロールオーバーを実装しなくてもいいんじゃないか、ということ。
背景だけを変更する、とかならむしろCSSが最適解なんだと思うのだけど、テキストごと置換してしまうような場合はJavascriptのほうが手軽だし、altも効くしいいのかなと。
Javascriptオフの人に対しては動きがなくなるけど、むしろオフの人はそういう動きを嫌っているのだからロールオーバーの効果がなくても問題ないのかなと。
Javascriptオフの場合にレイアウトが大幅に崩れてしまうような使い方はNGだと思うけど、ちょっとした利便性のための効果、くらいならJavascriptで実装してもいいと思う。
さて、前置きが長くなりましたが、作成したサンプルはこちらです。
画像のロールオーバーを自動化するJavascriptサンプル
実装は簡単で、javascriptを読み込ませてbodyのonloadでスクリプトを実行するだけで、指定のクラス名がついた画像に対してロールオーバーの処理を自動で付与する、というものです。
サンプル
2行追加するだけで、簡単にIE6でもmin-heightを実現する方法サンプル
※追記[2008/03/21]
機能を若干拡張しました。
自動生成されたページング部分に、ページ内リンクを設定しました。
これにより、ページ内リンクを含んだリンク（ex. index.html#no3など）を設定しておくことで自動的に該当のページ部分を表示するように修正しました。
また、ページ内リンクはページを移動する際に自動で付与されます。
▼サンプルURL
http://css-eblog.com/eblog_sample/0803/paging/#no12
ちょっとした不具合があったので修正しました(;´д｀)（2008/03/17 21:33現在）
Internet Qualityさんの所の紹介エントリーにあったサイトで、IE6だけにうまくCSSを適用しているサイトがあったので、自分のメモとしてもエントリー。
Example: margin: 20px !important; margin: 10px;
サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやらIE6の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。
なので、IE6だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。
©2008 CSS-EBLOG. All Rights Reserved
