- ベストアンサー
マウスオーバーとポップアップウィンドウを同時に行いたい
- 画像Aにマウスオーバーすると、画像BとCが表示され、さらに画像Cをクリックするとポップアップウィンドウが開きます。
- マウスオーバー時に画像Bと画像Cを表示させる方法や、画像Cをクリックしてポップアップウィンドウを開く方法が分かりません。
- 現在のコードでは、画像Aにマウスオーバーすると画像Bが表示されるようになっています。しかし、画像Cを表示させるためのコードや、ポップアップウィンドウを開くためのコードがないようです。
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ＞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をクリックするまでに消えてしまうので、操作が難しいけど…？
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
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> ─────────────────────────────── かと思ったのですが、やはりマウスアウト部分が動作しません。またおかしなことをやっているのでしょうか？ もう一つ悩んでいるのは、ポップアップが出るとき、マウスを画像Ｃに合わせても指のマークに変わらないので、そこからウィンドウが出ると気づいてもらえなそうなのが心配です。指のマークが出るようにできまるものなのでしょうか？ 丁寧に教えてくださってるのに本当にアホですみません。もう甘えられないと思い調べたり本を見たつもりなのですが、解決できず…恥を忍んでお尋ねします。申し訳ありません。
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 なんか、ぜんぜん違っちゃってませんか？ 目的に合わせたスクリプトにしないと、何がなんだかわからなくなっちゃいますよ。（スクリプトの意味を理解するようにしてください） <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さま、こんばんは。まさか再度お答えいただけるとは…。ありがたいと同時に申し訳ない気持ちでいっぱいです。すみません。 教えていただいたことによって、自分が作りたいもので何が足りないのかがよりはっきりしたので、私なりに必要に応じて直していったつもりだったんですが、全然違っていましたか…。すみません>_< 前回の質問は大変勉強になったのですが、私にとっては意外な方法だったので別のご意見を下さる方がいるかもと思い閉じずにおりました。せっかくご回答くださったのに、お気を悪くされたのでしたら申し訳ありません。締め切っておきます。 こんなに何度も教えていただいて本当にありがとうございます。これから試してみます！結果が出てから改めてお礼させていただきます。 ご無礼申し訳ありませんでした。
お礼
fujillinさま、ご無沙汰しています。ご連絡が遅くなり、丁寧に教えて下さったのに申し訳ありませんでした。 この前いただいた回答、読んでもさっぱり分からなくて、やっぱり一から勉強しようと思い本とかネットを見ました。少しずつ分かってきて、fujillinさんが教えてくださったこともようやく分かってきました。 勉強に時間をかけすぎてデザインの時間が減り大変苦労しましたがようやく思い通りのものができました。本当にありがとうございます。どうしても結果が出てからご報告したかったものでこんなに遅くなってしまい、申し訳ありませんでした。 ＞画像Aからマウスが離れたら画像Cを非表示にすると、Cをクリックするまでに消えてしまうので、操作が難しいけど…？ これは、画像Aの上にCがのるよう設定しているので問題ないと思います。がこの言葉にヒントを得て、結局Aの上に既にCが載っている画像にしてしまい、表示非表示するのはBだけという簡単なものにしてしまいました。 ということで、最初から最後までfujillinさんのおかげでした。ありがとうございます。お会いしてお詫び＆お礼がしなきゃいけない位のレベルですがどうぞお許し下さい。 しかし、Bにpng透過画像を使用していたためIE6では表示が汚く、また新たな問題が浮上してきました。もうほんとイヤ…。やっぱりfujillinさんが最初にアドバイス下さったようにFLASHで作るしかないかもと思ってます。 でもこの問題は解決しましたので、本当にありがとうございました!！