ｊａｖａでロールオーバー設定で教えてください

質問

外部ファイルで同じ設定でロールオーバーを設定しているのですが
ポイントを合わせると画像が動く（ボタンでよくある下にへこむような動作）ものと動かないものが出てきます。

ロールオーバー自体はできているのですがその動きの違いは何なのでしょうか？
できれば全て動くようにしたいのですが…

＜外部ファイル＞
if (document.images) {

var img1on = new Image();
img1on.src = "img/c2.png";
var img1off = new Image();
img1off.src = "img/c1.png";

}

function On(name) {

if (document.images) {

document.images[name].src = eval(name + 'on.src');

}

}

function Off(name) {

if (document.images) {

document.images[name].src = eval(name + 'off.src');

}

}

＜html＞
<p>
<a href="home.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/c1.png" alt="ホームへ" name="img1" border="0"></a>
</p>

これ以上のことはしていません。（全て統一でこのタグの
画像の名前やリンク先しかいじっていません。）
今貼り付けたものはへこむ動作はせずにロールオーバーのみが可能なものです。
誰か教えていただけませんでしょうか？
またへこむような動作はどこで設定されているのでしょうか？
色々調べてはいるのですが初心者なもので分かりません…
宜しくお願い致します。

回答No.2

reggaepunc

結構ソースをいじってしまいましたが。。

<script>
//マウスオンの時のスクリプト
function On(name) {
if (document.images) {
document.images[name].src = "c" + name + "_on.png";
}
}

//マウスオフ時のスクリプト
function Off(name) {
if (document.images) {
document.images[name].src = "c" + name + "_off.png";
}
}
</script>

<p>
<a href="home.html" onMouseOver="On(0)" onMouseOut="Off(0)">
<img src="c0_off.png"></a>
<a href="home.html" onMouseOver="On(1)" onMouseOut="Off(1)">
<img src="c1_off.png"></a>
<a href="home.html" onMouseOver="On(2)" onMouseOut="Off(2)">
<img src="c2_off.png"></a>
</p>

こちらでいかがでしょう。
チェックブラウザはfirefox3.5のみです。
ie系だと動かないような気もしますが、チェックしてみてください。
ieで動かない場合はアドイベントで動くようになります。
アドイベントもさらにめんどくさい処理が必要なのですが。。

回答No.1

fujillin

ご提示のスクリプトは、イメージをロールオーバーしているだけの機能のものです。
（記述方法には、少々疑問な点がいくつかありますが…）

＞ポイントを合わせると画像が動くものと動かないものが出てきます。
全てに同じ画像を使用しているのでしょうか？
基本的に、マウスのオン・オフで画像を入替えるだけの機能ですから、マウスオンのときの画像（c2.png）にボタンが押された状態の画像、マウスオフのときの画像（c1.png）に通常の状態の画像を設定してあげれば、マウスオンによって下にへこむように見えることになりますが、そういうことではないのでしょうか？

もっとも、ボタンの押下げって通常の操作でいうとマウスクリックに当たるので、マウスオンでこのような動作をするのは、どうもギミック的で個人的には好きになれませんけど…