ボタンをクリックすると、隣の画像の内容とリンクが切り替わる

締切済

質問者：yanashi
質問日時：2009/12/22 18:26
回答数：3件

未熟者のため、皆様にご質問させていただきます。

onmouseoverにて変化するボタンが5つ、その隣には写真が掲載されている、といった、なんの変哲もないページがあります。
このボタンを仮に「赤」「青」「黄」「緑」「茶」とさせていただきます。
「赤」のボタンを押すと、隣の写真が予め用意していた「赤い写真」に、「青」のボタンを押すと、写真は「青い写真」に…といった具合に切り替わります。

ここまでは問題ないのですが、その隣の写真には、それぞれの色に関連する別ページへのリンクを設定したいのです。

「赤」のボタンをクリックして現れた「赤い写真」をクリックすると、「赤いページ」へ移動する。
「青」のボタンをクリックして現れた「青い写真」をクリックすると、「青いページ」へ移動する。
…といった具合です。

getElementById…などの表記を色々試してみましたが、なかなか思うように動作してくれません。
作業するソフトはDreamweaverCS4、掲載されているページはXHTML1.0です。

このような情報だけで、アドバイスいただくことは可能でしょうか…よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2009/12/28 13:20

#2です。

＞<a href="javascript:void(0);" onmouseout="MM_swapImage('赤い
＞ボタン',～～
これだと、各ボタンにロールオーバーかなんかもやっているみたいですが…？
MM_swapImage()ってDreamweaverで生成されるfunctionだと思うのですが、中身がわからないので…（どこかで見たことあるけど…）

何種類かボタン付属のデータがあるので、本来なら配列かなにかにデータをまとめて入れておくのが良いと思いますが…
var data = [
['元の画像','ロールオーバー画像','拡大時の画像','リンク先url'],
　　・・・・・・・・・・・・・・・・・
みたいな感じ。

とりあえずロールオーバーは置いておくとして、ご質問の部分の参考に…

＊ソース全体がどのようにしていて、レイアウトをどう決めているか
　　も不明なので適当にリスト形式に設定しています。
＊ ↑の配列にデータを入れておく方法ではなく、HTMLソースに
　　リンクと画像を入れる方法にしています。）
＊各要素にイベントを貼り付けるのは繰り返しが多く、ソースが見に
　　くくなるので、代表してulに設定しています。
＊ ↑にも書きましたが、MM_swapImage()は中身が不明なので
　　使用していません。

<html>
<head><title>test</title>
<style type="text/css">
.wrap ul { float:left; list-style:none; margin:0; padding:6px; }
.wrap ul.button li a { display:none; }
.wrap li img { width:180px; height:40px; border:0; padding:2px; }
.wrap li img#expand { width:360px; height:218px; }
</style>

<script type="text/javascript">
function test(evt) {
var a, e, img, t = evt.target || evt.srcElement;
if (t.nodeName != 'IMG') return;
if (a = t.parentNode.getElementsByTagName('A')[0]) {
if (img = a.getElementsByTagName('IMG')[0]) {
e = document.getElementById('expand');
e.src = img.src;
e.parentNode.href = a.href;
}
}
}
</script>
</head>

<body>
<div class="wrap">
<ul class="button" onclick="test(event)">
<li>
<img src="red.gif">
<a href="xxx1.html"><img src="A.jpg"></a>
</li>
<li>
<img src="blue.gif">
<a href="xxx2.html"><img src="B.jpg"></a>
</li>
<li>
<img src="yellow.gif">
<a href="xxx3.html"><img src="C.jpg"></a>
</li>
<li>
<img src="green.gif">
<a href="xxx4.html"><img src="D.jpg"></a>
</li>
<li>
<img src="broun.gif">
<a href="xxx5.html"><img src="E.jpg"></a>
</li>
</ul>
<ul>
<li>
<a href="xxx1.html"><img src="A.jpg" id="expand"></a>
</li>
</ul>
</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2009/12/22 21:18

＞<a href="../red.html" id="test">「赤い写真」</a>

＞のような形でリンクを設定してみています。
「赤い写真」というのは、そのままテキストなのでしょうか、それとも
　<img src="赤い写真のアドレス">
みたいなイメージタグの意味でしょうか？

イメージタグの意味ならば、#1様の回答の前半の方法で可能です。
＞隣の写真が予め用意していた「赤い写真」に、「青」のボタンを
＞押すと、写真は「青い写真」に…といった具合に切り替わります。
この切り替えもjavascriptで行なっていると推測しますが、その時に
　element.src = '写真のアドレス';
みたいなことを行なっているはず。
そのelementに対して、
　element.parentNode.href = 'リンク先のURL';
あるいは、id="test"を利用して、
　document.getElementById('test').href = 'リンク先のURL';
でも、同じことですね。

もしも、「赤い写真」がテキストの場合（画像のキャプションになっているとか）は、（ご質問文にはこのテキストを変更しているという記述はありませんが）、テキストの変更とリンク先の変更、さらに画像をクリックした場合のリンク先の変更を合わせて行なう必要があるのかも…
（実際がどうなっているのかよくわからない）

＞> イメージ自体にトリガーをつけるなら…
＞この表現が既に分かりません。
画像にアンカータグがない場合を想定しての回答です。
HTML的に書けば、その画像要素に
　<img src="xxx.jpg" onclick="location.href = 'リンク先URL';">
みたいなイベント処理をjavascriptで設定してあげることで、同様のことが可能になるという意味です。

（めいっぱい具体的に書いたつもりですが、抽象的なご質問には、抽象的な回答にならざるを得ません。）

この回答への補足

抽象的なご質問となっておりますこと、重ねてお詫びいたします。
まず、リンクを切り替えたい画像に対しては、
<a href="red.html" id="test"><img src="赤い写真.jpg" id="5色の写真" ></a>
の形となっております。
また、ボタンに対しては、例えば赤いボタンなら、
<a href="javascript:void(0);" onmouseout="MM_swapImage('赤いボタン','','赤いボタン.jpg',0)" onmouseover="MM_swapImage('赤いボタン','','赤いボタン_r.jpg',0); return false;"><img src="赤いボタン.jpg" alt="" id="赤いボタン" onclick="MM_swapImage('5色の写真','','赤い写真,jpg',1);document.getElementById(test).href='red.html'" /></a>
の状態で止まってしまっています。（閉じタグ直前辺りは、わけがわからないまま、現状を記入しました）

読みにくかったら申し訳ございません、これでどれくらいスクリプト初心者なのかご理解いただけるかと思います…。
貴重なお時間を割いてアドバイスいただいているのに、頭が足らず申し訳ございません。

補足日時：2009/12/22 22:00

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2009/12/22 19:41

＞リンクを設定したいのです。

リンクをアンカー（<a href=・・・>）で処理するならidで取得した
オブジェクトのparentNodeのhrefをいじればよいでしょう。
イメージ自体にトリガーをつけるならonclickでlocation.hrefを
変更してください

この回答への補足

ご回答いただきましてありがとうございます。

知ったような口ぶりで質問してしまったことをお詫びします。
まず、リンクが変化する写真には、
<a href="../red.html" id="test">「赤い写真」</a>
のような形でリンクを設定してみています。
ページを開いた時点では、「赤い写真」が表示されている状態です。

> イメージ自体にトリガーをつけるなら…
この表現が既に分かりません。
きっと、理解されている方にとっては簡単な相談でしょうが、どうかご教授の程よろしくお願いします。

補足日時：2009/12/22 19:50

通報する