いつもお世話になっています。
画像Aにマウスオーバーすると、(画像Aは表示されたまま)画像BとCがある場所にそれぞれ表示され、さらに画像Cをクリックするとポップアップウィンドウが開く、という動作を行いたいです。
下記ソースにてAにマウスオーバー時Bが表示されることは実現できたのですが、Cを表示&ポップアップウィンドウを開くための記述をどうすればいいのか分かりません。おそらくとんちんかんなことをしてしまっているのだと思いますが、お助けいただけないでしょうか?長くなり恐縮ですが記述させていただきます。
─────────────────────────────
<style type="text/css">
<!--
.画像B{
display: none;
}
.画像B_disp{
display:block;
position: absolute;
top: 10px; left: 200px;<!--画像Bを表示させたい位置です-->
}
</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で教えていただいたものを利用させていただいた結果です。お恥ずかしい限りですが、どうぞよろしくお願い致します。
No.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をクリックするまでに消えてしまうので、操作が難しいけど…?
fujillinさま、ご無沙汰しています。ご連絡が遅くなり、丁寧に教えて下さったのに申し訳ありませんでした。
この前いただいた回答、読んでもさっぱり分からなくて、やっぱり一から勉強しようと思い本とかネットを見ました。少しずつ分かってきて、fujillinさんが教えてくださったこともようやく分かってきました。
勉強に時間をかけすぎてデザインの時間が減り大変苦労しましたがようやく思い通りのものができました。本当にありがとうございます。どうしても結果が出てからご報告したかったものでこんなに遅くなってしまい、申し訳ありませんでした。
>画像Aからマウスが離れたら画像Cを非表示にすると、Cをクリックするまでに消えてしまうので、操作が難しいけど…?
これは、画像Aの上にCがのるよう設定しているので問題ないと思います。がこの言葉にヒントを得て、結局Aの上に既にCが載っている画像にしてしまい、表示非表示するのはBだけという簡単なものにしてしまいました。
ということで、最初から最後までfujillinさんのおかげでした。ありがとうございます。お会いしてお詫び&お礼がしなきゃいけない位のレベルですがどうぞお許し下さい。
しかし、Bにpng透過画像を使用していたためIE6では表示が汚く、また新たな問題が浮上してきました。もうほんとイヤ…。やっぱりfujillinさんが最初にアドバイス下さったようにFLASHで作るしかないかもと思ってます。
でもこの問題は解決しましたので、本当にありがとうございました!!
No.2
- 回答日時:
No1です。
>せっかくご回答くださったのに、お気を悪くされたのでしたら申し訳ありません
全然気を悪くしたりしていませんので、もし御気を使われたのなら、返って申し訳ありません。
質問内容が「似ているけれど違うもの」になっていたので、具体的な内容が少し変わったのかと思いまして…
一応、同種類の二重質問は禁止というルールもあるので、念のために書いただけです。
(個人的には、前回の回答はflashのほうが良いのではというつもりでした。)
>私なりに必要に応じて直していったつもりだったんですが~
はい、いろいろと試して見てください。 よいことだと思います。
検索すれば、スクリプトの解説をしているサイトは山とありますので、個々の意味はそういうところで確認するのがよろしいかと。
(本当は、仕様書を読むのが一番でしょうけれど…)
前回の質問で、
>javascriptのロールオーバーは作ったことがあるのですが~
とのことでしたので、多少一般化したものにしましたが、わかりにくかったようで、不要になった部分もそのまま残っていたり、目的に対して、全体的にまわりくどく、複雑な手順になってしまっているように見受けられました。
・・・ので、↑(=No1)は、単純に、直裁にしたつもりです。
この回答への補足
何度もありがとうございます。
悪いことをしてしまい、怒ってらっしゃるかと思っていました。再びの優しいお言葉本当にありがとうございます。
No.1で教えていただいたものやってみたのですが、どうしてもうまくいかないことがあって、あきれられてしまうかもしれませんが、また質問させていただけますか?
マウスオーバーで表示+オンクリックでポップアップウィンドウはできたんですが、これをマウスアウト時は画像BとCを非表示にしたいのです。色々調べてみて、
───────────────────────────────
//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>
───────────────────────────────
かと思ったのですが、やはりマウスアウト部分が動作しません。またおかしなことをやっているのでしょうか?
もう一つ悩んでいるのは、ポップアップが出るとき、マウスを画像Cに合わせても指のマークに変わらないので、そこからウィンドウが出ると気づいてもらえなそうなのが心配です。指のマークが出るようにできまるものなのでしょうか?
丁寧に教えてくださってるのに本当にアホですみません。もう甘えられないと思い調べたり本を見たつもりなのですが、解決できず…恥を忍んでお尋ねします。申し訳ありません。
No.1
- 回答日時:
こんにちは。
なんか、ぜんぜん違っちゃってませんか?
目的に合わせたスクリプトにしないと、何がなんだかわからなくなっちゃいますよ。(スクリプトの意味を理解するようにしてください)
<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さま、こんばんは。まさか再度お答えいただけるとは…。ありがたいと同時に申し訳ない気持ちでいっぱいです。すみません。
教えていただいたことによって、自分が作りたいもので何が足りないのかがよりはっきりしたので、私なりに必要に応じて直していったつもりだったんですが、全然違っていましたか…。すみません>_<
前回の質問は大変勉強になったのですが、私にとっては意外な方法だったので別のご意見を下さる方がいるかもと思い閉じずにおりました。せっかくご回答くださったのに、お気を悪くされたのでしたら申し訳ありません。締め切っておきます。
こんなに何度も教えていただいて本当にありがとうございます。これから試してみます!結果が出てから改めてお礼させていただきます。
ご無礼申し訳ありませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryスライドショー画像への...
-
画像のランダム表示が遅い?
-
複数の画像を先に読み込ませ表...
-
テキストにオンマウスで指定箇...
-
ホォルダの読む込み
-
曜日別背景画像の固定
-
1枚の画像をクリックすると複数...
-
JavaScriptとチェックボックス...
-
画像をフォルダに入れれば表示...
-
画像に透明度をかけて、変数に...
-
WEBページ立ち上げ時に1回のみ...
-
textareaに画像を表示したい
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
背景色を透明化
-
JavaScriptにて『var val2 = "d...
-
【jQuery】2分割レイアウトで、...
-
jQueryで電卓を作っているのですが
-
JavaScriptでの画像切り替えを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報