マウスオーバーとポップアップウィンドウを同時に行いたい

解決済

質問者：nanaringo
質問日時：2009/02/18 18:09
回答数：3件

いつもお世話になっています。
画像Ａにマウスオーバーすると、(画像Ａは表示されたまま)画像ＢとＣがある場所にそれぞれ表示され、さらに画像Ｃをクリックするとポップアップウィンドウが開く、という動作を行いたいです。
下記ソースにてＡにマウスオーバー時Ｂが表示されることは実現できたのですが、Ｃを表示＆ポップアップウィンドウを開くための記述をどうすればいいのか分かりません。おそらくとんちんかんなことをしてしまっているのだと思いますが、お助けいただけないでしょうか？長くなり恐縮ですが記述させていただきます。
─────────────────────────────
<style type="text/css">

}
</style>
<script>
window.onload = function() {
var elm=document.getElementsByTagName('div');
for (var i=0; i<elm.length; i++){
if (elm[i].className=='photo'){
elm[i].onmouseover = function(){disp(this,1);}
elm[i].onmouseout = function(){disp(this,0);}
}
}
}
function disp(el,d) {
var f0=d?'画像B':'画像B_disp';
var f1=d?'画像B_disp':'画像B';
var e = el.firstChild;
while (e){
if (e.className==f0) {e.className=f1; break;}
e = e.nextSibling;
}
}
function OpenWin(){
win=window.open("ポップアップウィンドウページ.html","new","width=200,height=500");
}
</script>
</head>
<body>
<div class="画像A"><img src="画像A.jpg"/>
<div class="画像B"><img src="画像B.jpg"/></div>
</div>
</div>
</body>
────────────────────────────
上記ソースはhttp://oshiete1.goo.ne.jp/qa4725180.htmlで教えていただいたものを利用させていただいた結果です。お恥ずかしい限りですが、どうぞよろしくお願い致します。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： fujillin
回答日時：2009/02/19 10:09

こんにちは

＞document.getElementById('B').style="visibility:hidden";
表示の制御はvisibilityでも良いのですが、もともとがdisplayでやっているのでそのままdisplayを利用するのが普通の考え方でしょう。
（最初に表示されていない仕組みを理解してください）
なお、visibiilityもdisplayも、スクリプトからはstyleの属性としてアクセスしますので、書式が違っています。もとのdisp()の書式を研究してください。

ついでながら、非表示用にhide()を作るのもOKですが、表示/非表示を引数にして（例えば1：表示、0：非表示）、どちらの場合もdisp()を呼び出すという方法もあります。
disp(param){document.getElementById('B').style.display=param?'block':'none';}
みたいな感じ。（ご質問文の中のdisp()はこの類ですね）

＞指のマークが出るようにできまるものなのでしょうか？
styleでやるなら、　element.style.cursor = 'pointer'; ですが、ご質問のケースではスクリプトで設定する必要もないので、最初の定義でcursor:pointer;の指定をしておけば良いのでは？（cursorの属性指定は、もしかすると一部のブラウザでダメかも。）

CSS以外の方法としては画像Cを<a href～><img ></a>として、リンクにしておけば、自動的にカーソルが変化してくれますね。
この場合は、実際にはリンクが必要ないので、スクリプトでreturn falseなどでキャンセルしておくことが必要になりますが…

javascriptについては、以下などを参考にして、調べられるようになってください。
　http://javascriptist.net/
　http://www.openspc2.org/JavaScript/

ところで、素朴な疑問として、画像Aからマウスが離れたら画像Cを非表示にすると、Cをクリックするまでに消えてしまうので、操作が難しいけど…？

- 0
- 件

通報する

この回答へのお礼

fujillinさま、ご無沙汰しています。ご連絡が遅くなり、丁寧に教えて下さったのに申し訳ありませんでした。

この前いただいた回答、読んでもさっぱり分からなくて、やっぱり一から勉強しようと思い本とかネットを見ました。少しずつ分かってきて、fujillinさんが教えてくださったこともようやく分かってきました。

勉強に時間をかけすぎてデザインの時間が減り大変苦労しましたがようやく思い通りのものができました。本当にありがとうございます。どうしても結果が出てからご報告したかったものでこんなに遅くなってしまい、申し訳ありませんでした。

＞画像Aからマウスが離れたら画像Cを非表示にすると、Cをクリックするまでに消えてしまうので、操作が難しいけど…？
これは、画像Aの上にCがのるよう設定しているので問題ないと思います。がこの言葉にヒントを得て、結局Aの上に既にCが載っている画像にしてしまい、表示非表示するのはBだけという簡単なものにしてしまいました。

ということで、最初から最後までfujillinさんのおかげでした。ありがとうございます。お会いしてお詫び＆お礼がしなきゃいけない位のレベルですがどうぞお許し下さい。

しかし、Bにpng透過画像を使用していたためIE6では表示が汚く、また新たな問題が浮上してきました。もうほんとイヤ…。やっぱりfujillinさんが最初にアドバイス下さったようにFLASHで作るしかないかもと思ってます。
でもこの問題は解決しましたので、本当にありがとうございました!！

通報する

お礼日時：2009/02/26 11:46

No.2

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

No1です。

＞せっかくご回答くださったのに、お気を悪くされたのでしたら申し訳ありません
全然気を悪くしたりしていませんので、もし御気を使われたのなら、返って申し訳ありません。
質問内容が「似ているけれど違うもの」になっていたので、具体的な内容が少し変わったのかと思いまして…
一応、同種類の二重質問は禁止というルールもあるので、念のために書いただけです。
（個人的には、前回の回答はflashのほうが良いのではというつもりでした。）

＞私なりに必要に応じて直していったつもりだったんですが～
はい、いろいろと試して見てください。　よいことだと思います。
検索すれば、スクリプトの解説をしているサイトは山とありますので、個々の意味はそういうところで確認するのがよろしいかと。
（本当は、仕様書を読むのが一番でしょうけれど…）

前回の質問で、
＞javascriptのロールオーバーは作ったことがあるのですが～
とのことでしたので、多少一般化したものにしましたが、わかりにくかったようで、不要になった部分もそのまま残っていたり、目的に対して、全体的にまわりくどく、複雑な手順になってしまっているように見受けられました。
・・・ので、↑（=No1）は、単純に、直裁にしたつもりです。

この回答への補足

何度もありがとうございます。
悪いことをしてしまい、怒ってらっしゃるかと思っていました。再びの優しいお言葉本当にありがとうございます。

No.1で教えていただいたものやってみたのですが、どうしてもうまくいかないことがあって、あきれられてしまうかもしれませんが、また質問させていただけますか？

マウスオーバーで表示＋オンクリックでポップアップウィンドウはできたんですが、これをマウスアウト時は画像ＢとＣを非表示にしたいのです。色々調べてみて、
───────────────────────────────
//script部分
//BとCを表示
function disp(){
document.getElementById('B').style.display='block';
document.getElementById('C').style.display='block';
}
//BとCを非表示←ここを加えました
function hide(){
document.getElementById('B').style="visibility:hidden";
document.getElementById('C').style="visibility:hidden";
}
//別ウィンドウを開く
function popup(){
window.open('test.html','Test','width=200,height=200'');
}
</head>
<body>
<img src="画像A.jpg" onmouseover="disp()" onmouseout="hide()"/>
<img src="画像B.jpg" id="B" />
<img src="画像C.jpg" id="C" onclick="popup()" />
</body>
───────────────────────────────
かと思ったのですが、やはりマウスアウト部分が動作しません。またおかしなことをやっているのでしょうか？

もう一つ悩んでいるのは、ポップアップが出るとき、マウスを画像Ｃに合わせても指のマークに変わらないので、そこからウィンドウが出ると気づいてもらえなそうなのが心配です。指のマークが出るようにできまるものなのでしょうか？

丁寧に教えてくださってるのに本当にアホですみません。もう甘えられないと思い調べたり本を見たつもりなのですが、解決できず…恥を忍んでお尋ねします。申し訳ありません。

補足日時：2009/02/18 23:03

通報する

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2009/02/18 19:21

こんにちは。

なんか、ぜんぜん違っちゃってませんか？
目的に合わせたスクリプトにしないと、何がなんだかわからなくなっちゃいますよ。（スクリプトの意味を理解するようにしてください）

<html>
<style>
#B{
display: none;
position: absolute;
top: 10px; left: 200px;
}
#C{
display: none;
position: absolute;
top: 300px; left: 200px;
}
</style>
<script>
//BとCを表示
function disp(){
document.getElementById('B').style.display='block';
document.getElementById('C').style.display='block';
}
//別ウィンドウを開く
function popup(){
window.open('test.html','Test','width=200,height=200');
}
</script>
</head>
<body>
<img src="画像A.jpg" onmouseover="disp()" />
<img src="画像B.jpg" id="B" />
<img src="画像C.jpg" id="C" onclick="popup()" />
</body>
</html>

あと、終了した質問は閉じるようにしましょう。

この回答への補足

fujillinさま、こんばんは。まさか再度お答えいただけるとは…。ありがたいと同時に申し訳ない気持ちでいっぱいです。すみません。
教えていただいたことによって、自分が作りたいもので何が足りないのかがよりはっきりしたので、私なりに必要に応じて直していったつもりだったんですが、全然違っていましたか…。すみません>_<

前回の質問は大変勉強になったのですが、私にとっては意外な方法だったので別のご意見を下さる方がいるかもと思い閉じずにおりました。せっかくご回答くださったのに、お気を悪くされたのでしたら申し訳ありません。締め切っておきます。

こんなに何度も教えていただいて本当にありがとうございます。これから試してみます！結果が出てから改めてお礼させていただきます。
ご無礼申し訳ありませんでした。

補足日時：2009/02/18 21:06

通報する