ロールオーバーをJavascriptで設置すると、ネームの指定をユニークにしないといけないというめんどくさいことが発生します。

それだけならまだしも、例えばショッピングカートの商品一覧ページなどで「詳細ページへ」のリンクボタンをロールオーバーさせる・・・なんて仕様よく有りますよね。

Javascriptの仕様を理解しているデザイナーさんだとそういうことはあまりしないし、仮にやったとしてもCSSで「:hover」を使ってやることになります。
CSSでやるのは、それはそれでOKなんですが、IE6以下では<a>タグ以外には「:hover」が使えないなどがあり、リンクを設置しない場合は「:hover」が使えないので、「:hover」も番頭とは言い切れないかな〜なんて思います。
また、各種ブラウザで「:hover」部分のプレビューを確認するのもなかなか大変です。

そして、<a>タグを使用しない画像でもロールオーバーさせることができます。

DreamweaverでさくっとJavascriptを使ったロールオーバーを設置することができます。
これは、ヘッダー内のメニューやサイドメニューなど、そのページに1個しかないボタンを作るのには問題ありません。
しかし、1ページの中に複数同じボタンがあり、それをロールオーバーさせる場合は、それぞれのボタンに書かれているネームをユニークにしないと動作しないという難点があります。
プログラムでネームを連番で出力させ、ユニークにするなんてことをされていると思うのですが、できればそんな余計なところに力を注ぎたくないですよね。

このスクリプトは、ネームをつける必要が無いというすげーもんです！
大抵は、MacIE5.1、5.2で使えないものが多いのですが、これはどのブラウザでも大丈夫でした。
私は今まで何をしていたのだろう！！！と思うほど、ショックを受けたスクリプトです（ショックの受け様には個人差ありｗｗ）。
とにかく簡単なんで、是非試してください。

配布元⇒dnolan.com

配布元が外国サイトなので、よく閉鎖したりします。こちらにも保管しておきました。

Standards Compliant Rollover Script	rollover.lzh　ダウンロード

Win：IE6・IE7・FF2・FF3・Opera9、Mac：FF2・FF3・Safari3・Opera9・Mac IE5.1・Mac IE5.2・Netscape7での動作検証済みです。

（１）設置
設置方法はダウンロードしたrollover.jsをhead要素内などで読み込むだけです。
外部ファイルとして、「rollover.js」をおくといいでしょう。すでに外部ファイルがある場合は、追記可能です。追記して動作しない場合は、「rollover.js」を単独で置いてください。
単独で「rollover.js」を外部ファイルとしておいた場合は、ヘッダー内に、その外部ファイルへのリンクを記述します。

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

（２）画像の準備
いつも通り、ロールオーバー前の画像と、ロールオーバー後の画像、2枚用意します。
名前の付け方にポイントがあります。
ロールオーバー後の画像には「_o」を追加します。ただし、この追加する文字列はスクリプトファイル内で変更可能です（後で書きます）。

ロールオーバー前・・・・・detail.gif
ロールオーバー後・・・・・detail_o.gif

（３）HTML内に画像を読み込むタグを書く。
まず最初にHTML内には普通に画像を読み込ませるタグを書きます。

<img src="images/detail.gif" alt="" width="100" height="50">

↓「 class="imgover"」を追加します。このクラス名もスクリプト内で変更可能です。

<img src="images/detail.gif" alt="" width="100" height="50" class="imgover">

この画像に別途スタイルを適用したい場合は、半角開けて「 class="imgover style1"」とクラス名を記述すればいいでしょう・・・と、書かれていたのですが、試したところ、なんだか動作いたしません。CSSは適用されるのですが、スクリプトが正しく動きませんでした。
「imgover」にCSSを指定することはできます。が、いろんなページで「imgover」を記述している場合、「imgover」にクラス指定してしまうとサイト全体に影響しかねませんので（ID使えば大丈夫です）、使用の際にはIDやクラスを使って限定することが必要です。

#sample_1 .imgover{
margin:0px 0px -5px 6px;
}
.sample_2 .imgover{
margin:0px 0px -5px 6px;
}

仕方ないので、限定させるのがめんどくさいときは、下記のようにスタイルを直接書くことで、スクリプトも動作し、スタイルも適用させることができました。

<img src="images/detail.gif" alt="" width="100" height="50" class="imgover" style="margin:0px 0px -5px 6px;">

これでロールオーバーする画像が出来上がりました！
楽でしょ？

⇒サンプル

（４）画像ファイル名の変更方法
以下の2箇所の「_o」を好きな文字列に変更します。

スクリプト　75行目	var hsrc = src.replace(ftype, '_o'+ftype);
スクリプト　88行目	if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);

（５）クラス名の変更方法
以下の「imgover」を好きな文字列に変更します。

スクリプト　15行目	if (aImages[i].className == 'imgover') {

（６）onloadとのバッティング
うまく動かないときは、他のonloadイベントとのバッティングの可能性も考えられます。
その際は、以下のように修正するといいでしょう。
ただし、こちらの書き換えは検証しておりませんので、参考として書いておきます。
（まだバッティングしたことないんですよね。）

スクリプト最後尾　38行目	window.onload = initRollovers;
上記箇所を下記のように 書き換えます。	try{ window.addEventListener("load",initRollovers,false); } catch(e){ window.attachEvent("onload",initRollovers); }