重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

マウスイベントで画像を２つ変える

解決済

  • 質問者：macdotcat
  • 質問日時：
  • 回答数：2件

お世話になります、

画像のように上部にナビゲーションがあり、下部に画像。
ナビゲーションAには「通常時」と「クリックした後（オーバーではない）」の二枚の画像を使用、
ナビゲーションAをクリックすると下部のB画像が表示される、
ナビゲーションC、Dも同じ動作…

つまり、A自身もクリックで画像がかわり、
同時にクリックでスワップする部分も画像が変化する
ということです。説明が下手ですみません…

ということは可能でしょうか。
Onclickでやろうと思ったのですが、ナビゲーションAに１つの役割しか
当てることができず、検索もしてみましたが分からず。

どうぞよろしくお願いします。

「マウスイベントで画像を２つ変える」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

よくわからないので、原理のみ。


（とりあえず、2箇所の画像が変わります）
あとは適当にアレンジしてください。

<html>
<head><title>test</title>
<style type="text/css">
.navi img { width:150px; height:100px; }
#target { width:450px; heigth:300px; }
</style>

<script type="text/javascript">
function change(e, a, b) {
e.src = a;
document.getElementById('target').src = b;
}
</script>
</head>

<body>
<div class="navi">
<img src="A.jpg" onclick="change(this,'a.gif','a.png')">
<img src="B.jpg" onclick="change(this,'b.gif','b.png')">
<img src="C.jpg" onclick="change(this,'c.gif','c.png')">
</div>
<img src="x.png" id="target">
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

分かりづらい説明だったのに、
こんなに完璧に再現していただいてありがとうございます！
カンペキです！
ちゃんとやりたいことが再現できました。
ありがとうございました♪
またどうぞよろしくお願いします。

通報する
お礼日時：2010/01/20 13:14

No.1

  • 回答者： yambejp
  • 回答日時：

AをクリックするとA→A', X→B


CをクリックするとC→C', X→B'
DをクリックするとD→D', X→B''

という仕様ですか？

またA→A'の状態でCをクリックするとき、A'→Aとしなくてもよいのですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
はい、A'→AとしなくてもしてもどちらでもOKです！
今回は二番目の回答者さんの案で行けそうです。
またどうぞよろしくお願いします。

通報する
お礼日時：2010/01/20 13:12

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報