bundle.jsについて
画像の自動ロールオーバー、フォームの自動フォーカス、テーブルの一行おきの色替え、ページ内リンクのスムーススクロールを行います。
- 対象ブラウザはInternet Explorer 6.0&7.0、Firefox 2.0&3.0、Safari 3.1、Opera 9.27&9.5。
- ソースがシンプルなJSによるロールオーバー｜CSS HappyLife、テキストフィールドのフォーカス時に背景色を変更する JavaScript｜鷹の島、Striped Tables | Wellstyled.com、Smooth scrolling demo | as days pass by, by Stuart Langridgeを元ネタに作成。
画像の自動ロールオーバーについて
*_off.pngと名付けられた画像の上にマウスオーバーすると、自動的に*_on.pngと名付けられた画像を探して表示します（画像の拡張子はjpg、gifなど何でもOK）。また、*_off.pngという名前の画像がある場合、ページ読み込み時に*_on.pngという名前の画像をプリロードします。
フォームの自動フォーカスについて
<input type="text">、<input type="password">、<textarea>タグにマウスをフォーカスした際、バックグラウンドの色を自動的に変更します。
テーブルの一行おきの色替えについて
すべてのtableに対して、<tr>タグの奇数行にclass="odd"を、偶数行にclass="even"を追加します。
| Web Browsers | ||
|---|---|---|
| 1 | Internet Explorer 6.0 | 34.62% |
| 2 | Internet Explorer 7.0 | 26.03% |
| 3 | Firefox 2.0 | 22.32% |
| 4 | Firefox 1.5 | 3.52% |
| 5 | Firefox 3.0 | 3.16% |
| 6 | Opera 9.2 | 1.08% |
| 7 | Safari 2.0 | 0.98% |
| 8 | Safari 3.0 | 0.92% |
| 9 | Firefox 1.0 | 0.68% |
| 10 | Mozilla 1.8 | 0.58% |
W3Counter - Global Web Stats (2008 July)
ページ内リンクのスムーススクロールについて
ページ内リンクを押した際に、画面がリンク先までスムーズにスクロールします。name属性に対してはもちろん、<div id="top">など、id属性をターゲットにして<a href="#top">などと記述することもできます。