- ベストアンサー
Dreamweaver CS3を使用しています。
Dreamweaver CS3を使用しています。 通常のロールオーバーは作れるのですが、Aの画像にマウスを合わせた時に 同じ場所にBの画像を表示させる以外に、離れた場所にCの画像も表示させたいです。 なおかつ、A・Bをメニューバーとして考えて、それぞれのメニューバーにマウスを 合わせた場合、Cの部分の画像をそれぞれ変えたいのですが、どのような処理をすれば 良いのでしょうか？ 宜しくお願い致します。
- mika1974
- お礼率98% (57/58)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
失礼 「Dreamweaver CS3」じゃなくて「MS Frontpage Express」の プレビューの例でした。 最近のやつは下↓でOK（CSS関係無い、<AにはID不要>) 最も画像リンクじゃなくてメニューに使うなら、もうひとくふう必用。 <script type="text/javascript" charset="utf-8"> <!-- window.onload = function () { if(document.addEventListener){ document.addEventListener('mouseover',function(e){menuClick(e)},false); }else{ document.attachEvent('onmouseover',function(e){menuClick(e)}); } function menuClick(e){ var t= (e.srcElement || e.target); if(t.nodeName=="A" && t.getAttribute("rel")=="menu"){ document.getElementById('C').setAttribute('src',t.getAttribute("href")); } } } // --> </script> <body> <a rel="menu" href="A.png">A</a> <a rel="menu" href="B.png">B</a> <br> <!-- 離れたところに --> <img id="C" src="about:blank"> </body>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
Dreamweaverは使ったことがありませんが… ＞通常のロールオーバーは作れるのですが～～ 実際にどのような方法で実現しているのかわからないので、なんとも言えませんが、javascriptの質問なのでCSSのロールオーバーではないと解釈すれば、同じ方法でC画像も一緒に（引き続いてという意味）書き換えてあげればよいだけではないでしょうか？ ロールオーバーと言っているからには、A画像はマウスアウトのときに元にもどるのでしょうけれど、C画像は元に戻すのか戻さないのか… （戻さないタイプのほうが多いような気がするけれど） さらには、C画像に表示するのは、A画像のロールオーバーと同じ画像なのか違う画像なのか、など、よくわからんところが多いので、少々遠回りな方法になりますが、ロールオーバーの画像関係をテーブル（配列）に定義しておく方法。 （内容が簡単ならもっと簡単にできるけれど、質問文からは読取ない） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> .navi { list-style: none; padding:0; margin:0; } .navi li { float:left; } .navi img { width: 100px; } </style> <script type="text/javascript"><!-- function role(evt) { //ロールオーバーの画像定義 //自分自身, 自分のロールオーバー, C画像, Cのロールオーバー var img = [ [ 'A.jpg','Ar.jpg','C.jpg','CrA.jpg'], [ 'B.jpg','Br.jpg','C.jpg','CrB.jpg'] ]; var t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; var i, idx = -1, li = t.parentNode; var flg = evt.type == 'mouseover'?1:0; var ls = li.parentNode.getElementsByTagName('LI'); for (i=0; i<ls.length; i++) if (ls[i] == li) {idx = i; break;} if (idx < 0) return; t.src = img[idx][flg]; document.getElementById('targetC').src = img[idx][flg+2]; } --></script> </head> <body> <ul class="navi" onmouseover="role(event)" onmouseout="role(event)"> <li><img src="A.jpg" alt="A"></li> <li><img src="B.jpg" alt="B"></li> </ul> <hr style="clear:left;"> <div><img id="targetC" src="C.jpg" alt="C"></div> </body> </html> *イベント処理をきちんと実装するなら、No3様のようにaddEventListenerを用いるのがよいかも。
お礼
質問内容が曖昧で申し訳ありませんでした。 ご回答いただき、ありがとうございます。 今回、ロールオーバーの応用の依頼をいただき、 勉強しながら作ってみようと思いましたが、 予定よりも早く完成しなければならなくなり、 結局、社内の別の人が担当することになりました。 fujillin様から教えていただいた内容でも 試してみましたが、上手く実行できませんでした。 タグの内容を理解できれば、上手く使える気が するので、勉強しながら、また試したいと思います。 ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
「Dreamweaver CS3」買えないのでよくわからんが、 たぶんページがロードされた時に実行するスクリプトの登録 画面に、＃2の回答の if(document.addEventListener){ document.addEventListener('mouseover',function(e){menuClick(e)},false); }else{ document.attachEvent('onmouseover',function(e){menuClick(e)}); } function menuClick(e){ var t= (e.srcElement || e.target); if(t.nodeName=="A" && t.getAttribute("class")=="menu"){ document.getElementById('C').setAttribute('src',t.getAttribute("href")); } } を貼ればよい。 <a class="menu" href="A.png">A</a> <a class="menu" href="B.png">B</a> <img id="C" src="about:blank"> は素直に、「Dreamweaver CS3」で生成できると思うんですが．．.
お礼
いつも、レビュー画面で作成していて、 タグの意味がよく分かりません。 それを含めて、ご回答いただいた内容で いろいろ勉強したいと思います。 何度も詳しく教えていただき、本当に ありがとうございます。
- yyr446
- ベストアンサー率65% (870/1330)
DreamweaverCS3なら、（使った事ないけど） <style type="text/css"> A#A:hover {color:red;behavior:expression(document.getElementById('C').setAttribute('src','A.png'));} A#B:hover {color:red;behavior:expression(document.getElementById('C').setAttribute('src','B.png'));} </style> <body> <a id="A" href="A.png">A</a> <a id="B" href="B.png">B</a> <!-- 離れたところに --> <img id="C" src="about:blank"> </body> でどうでしょう。 最近のブラウザーなら、．．．．
お礼
ご回答いただき、ありがとうございます。 今回、ロールオーバーの応用の依頼をいただき、 勉強しながら作ってみようと思いましたが、 予定よりも早く完成しなければならなくなり、 結局、社内の別の人が担当することになりました。 yyr446様のアドバイスをもとに試してみようと 思います。 やってみたものの上手にいかなかったので、 また試してみます。 ありがとうございました。
お礼
ご回答いただき、ありがとうございます。 今回、ロールオーバーの応用の依頼をいただき、 勉強しながら作ってみようと思いましたが、 予定よりも早く完成しなければならなくなり、 結局、社内の別の人が担当することになりました。 yyr446様のアドバイスをもとに試してみようと 思います。 やってみたものの上手にいかなかったので、 また試してみます。 ありがとうございました。