Dreamweaver MX のロールオーバー機能とスワップイメージ機能の組み合わせについて

質問

2つの機能の組み合わせについて悩んでいます。
ロールオーバー機能 (マウスポインタが上に乗ったときに別の画像に変わる) とスワップイメージ機能 (マウスポインタが乗っているのとは別の場所の画像を変える) を同時に行いたいのですが可能でしょうか?
試しに1ページ作成したところロールオーバーされる画像にマウスポインタを上にしたとき画像も変更されスワップイメージの方も画像が変わるのですが、マウスポインタを離したときスワップイメージの方だけが画像が元に戻らず悩んでいます。マウスポインタを離したときスワップイメージも元に戻す方法はございませんか？
回答宜しくお願いいたします。

回答No.1

toriesky · ベストアンサー

両方をDWで作る方法は残念ながら分からないのですが、
DWで作ったものに少しだけ手を加えると実現できます。

まず、DWのメニューからスワップイメージを作ります。
次にロールオーバーイメージにしたい画像に、
下記の内容を書き加えます。

onMouseOver="this.src='マウスが乗った時の画像ファイル名'" onMouseOut="this.src='離した時の画像ファイル名'"

****************************************************
例えば、黒い画像(black.gif)の下にイラスト１(gazo1.gif)が
配置されていて、
その黒い画像にマウスを乗せると赤い画像(red.gif)に入れ替わり、
同時に下のイラスト１もイラスト2（gazo2.gif)に変わるという場合、
DWのメニューから黒画像(black.gif)にマウスを乗せるとイラストが入れ替わる(gazo1.gifからgazo2.gifへ)
というスワップイメージを作ります。
このときコードを見ると黒い画像の部分は
<img src="black.gif" name="Image1" border="0" id="Image1">
のようになっていると思います。
そこへさきほどのものを付け加えて、

<img src="black.gif" onMouseOver="this.src='red.gif'" onMouseOut="this.src='black.gif'" name="Image1" border="0" id="Image1">

のようにします。
これだと、ロールオーバーもスワップイメージも
マウスを乗せると変わるし、離すと元にもどります。

上手く説明出来なくてすみませんが、
試してみて下さい（なお、画像は適当にご用意下さい）。

お礼

バッチリ難題解けました。torieskyさん御丁寧な回答どうもありがとうございました。