javaを使ってマウスオンでの画像切替について

解決済

質問者：catlove1000
質問日時：2010/12/17 01:58
回答数：2件

javaを使って、ある1つの画像にマウスを乗せると、
他の場所にある画像2つが同時に入れ替わるという事を行いたいのですが
どうしても上手くいきません。

例えば・・・

┌─────┐
│◇画像Ａ◇ │
└─────┘
┌─────┐
│○画像Ｂ○ │
└─────┘
┌─────┐
│☆画像Ｃ☆ │
└─────┘

とあるとしたら、

画像Aにマウスを乗せた場合、画像Cと画像Dが
他の画像になるようにしたいのです。

┌─────┐
│◇画像Ａ◇ │←これにマウスオン
└─────┘
┏━━━━━┓
┃●画像Ｂ● ┃
┗━━━━━┛←画像Ｂと画像Ｃが
┏━━━━━┓←同時に他の画像に変わる
┃★画像Ｃ★ ┃
┗━━━━━┛

画像Ａはマウスを乗せても変化は無いままで、
画像Ｂと画像Ｃは異なる画像です。
マウスを画像Ａから放したら、元の画像に戻るようにしたいと考えています。
さらに、同ページ内に複数使用したいのです。
　　　　 ~~~~~~~~~~~~~~~~~~~~~

if (document.images) {

var img0 = new Image();
img0.src = "○画像Ｂ○";

var img1 = new Image();
img1.src = "●画像Ｂ●";

function On(name) {
if (document.images) {
document.images['ネーム'].src = eval(name + '.src');}}

function Off() {
if (document.images) {
document.images['ネーム'].src = img0.src;}}

を応用して、どうにかならないかな…と思ったのですが、
どうにもなりませんでした。
もしかしたら、応用のやり方が間違えているのかもしれません。
あまり詳しくないので・・・。

どこを探してもサンプル等見つからず、困っています。
どなたか教えて下さい。どうぞ宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2010/12/17 18:13

なるべく簡単に一般化したつもりだけれど長くなってしまった。

（チェック等は省略）

画像同士の位置関係に規則性があるのか不明なので、全部idで処理しています。
同時に入れ替える対象画像数の指定なし。
マウスオンの対象も複数設定可能。（入替え対象画像の重複可）
（画像の先読みはしていません。必要ならaddのあたりで…）

設定は、Changer.add（"マウスオン画像のid", ["変更画像1のid, 変更url",　・・・・]) の要領で、設定を削除する時は、Changer.remove("画像id")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<div>
trigger1
<img id="trigger1" src="btn1.gif" alt=""><br>
trigger2
<img id="trigger2" src="btn1.gif" alt="">
</div>
<hr>
<div>
target<br>
<img id="target1" src="A.jpg" alt="C by1">
<img id="target2" src="B.jpg" alt="C by1">
<img id="target3" src="C.jpg" alt="C by1 & 2">
</div>

<script type="text/javascript">

</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
で、できました！　理想通りに画像が変わります！
嬉しくて、意味なく何度も画像にマウス乗せて遊んでます（笑）
できた時はかなり感動しました。
もう３週間位パソコンとにらめっこして悩んでいたので・・・。
本当に感謝しています。ありがとうございます！♪＼（＾▽＾）

通報する

お礼日時：2010/12/17 23:58

No.1

回答者： ralf124c
回答日時：2010/12/17 10:48

画像が以下の5点あると仮定します

A.JPG
B1.JPG（画像Bの元）
B2.JPG（画像Bの変身）
C1.JPG（画像Cの元）
C2.JPG（画像Cの変身）
以下サンプル

<html>
<head>
<title>TEST</title>
<script language="JavaScript"></script>
</head>
<body>
<img src="./A.JPG" border="0" onMouseover="javaScript:change(0)" onMouseout="javaScript:change(1)"><br>
<img src="./B1.JPG" name="myIMG1" border="0"><br>
<img src="./C1.JPG" name="myIMG2" border="0"><br>
</body>
</html>