マウスオーバー・アウトの制御のソース

質問

複数のボタンでマウスオーバー・アウトの制御のソースを教えてもらったのですが、質問いたします。

この場合、このボタンはオーバーとアウト、それぞれ同じ画像を使用しているのですが、その場合でも全部違ったファイル名をつけなければいけないのでしょうか？
現在はそあしているのですが、何か無駄な気がして・・・。
よしくお願いします。

<SCRIPT LANGUAGE = "JavaScript">

<!--

if (document.images) { //if image object is available

img1on = new Image(); // MouseOver Images

img1on.src = "images/c1b.gif";

img2on = new Image();

img2on.src = "images/c2b.gif";

img3on = new Image();

img3on.src = "images/c3b.gif";

img1off = new Image(); // MouseOut Images

img1off.src = "images/c1a.gif";

img2off = new Image();

img2off.src = "images/c2a.gif";

img3off = new Image();

img3off.src = "images/c3a.gif";

img4off = new Image();

}

function imgOn(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "on.src"); }}

function imgOff(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "off.src"); }}

//-->

</SCRIPT>

回答No.2

noname#199778 · ベストアンサー

補足読みました。

先ほど補足されたスクリプトをコピーして、Windows Me上で動作を確認してみたんですが、IE6とNetscape7では正常に動作しています。 ただ、Opera7.11ではうまく動かないかもしれません。
一応、スクリプト自体には問題はないと思います。

もし差し替えられる画像が表示されずに枠だけになったり、消えてしまったりするのであれば、おそらくはスクリプト中の「img***.src = "images/***.gif"」の部分で、画像のURLを正確に指定していないために起きている不具合なのではないかと思います。
補足のソースを見たところ、下の画像リンクのところ(img要素)では画像のURLを「src="image/c1a.gif"」などと指定されていますが、スクリプトのイメージオブジェクトにsrcを格納している部分では画像のURLが「images/c1b.gif」で指定されています。
もしどちらの画像ファイルも同じフォルダに入れてあるのであれば、おそらくはスクリプト部分でこのフォルダ名が間違っているのではないかと思います。 スクリプト部分のフォルダの名前をすべて正確に直せば、正常に動作してくれるのではないかと。

見当違いでしたら、ごめんなさい。

お礼

もう、本当にすみません。
フォルダ名を間違えていました。
わざわざ動作を確認していただいて、お手数をかけました。

ありがとうございました！

回答No.1

noname#199778

まったく同じ画像ファイルを使うのであれば、名前を変えて複数のファイルにする必要はありません。
同じ画像ファイルをロールオーバーする画像に指定しても、正常に動いてくれるはずですよ。

お礼

以前、このソースのまま画像ファイルを同じにしてやってみたところ、正常に動かなくて、違うファイル名をいちいち付けたのですが、きっとどこかを間違えていたのですね。
もう一度やってみます。ありがとうございました！

補足

たびたびすみません。
下記のように替えてみましたが、だめなんです。
間違っていますか？

<script LANGUAGE="JavaScript">

<!--

if (document.images) { //if image object is available

img1on = new Image(); // MouseOver Images

img1on.src = "images/c1b.gif";

img2on = new Image();

img2on.src = "images/c1b.gif";

img3on = new Image();

img3on.src = "images/c1b.gif";

img1off = new Image(); // MouseOut Images

img1off.src = "images/c1a.gif";

img2off = new Image();

img2off.src = "images/c2a.gif";

img3off = new Image();

img3off.src = "images/c3a.gif";

}

function imgOn(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "on.src"); }}

function imgOff(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "off.src"); }}

//-->

</script>

-----------------

<a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" href="1.htm">
<img NAME="img1" BORDER="0" SRC="image/c1a.gif" width="177" height="32"></a></td>
</tr>
<tr>
<td width="15">　</td>
<td width="214">
<a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="2.htm">
<img NAME="img2" BORDER="0" SRC="image/c2a.gif"></a></td>