- ベストアンサー
クリッカブルマップと位置を固定したフローティングボックスを使いたい
クリッカブルマップについてはどうにか？？理解したつもりなのですが、マウスでポイントしたところの簡単な説明を座標を固定したフローティングボックスに表示したいと考えています。できればページをスクロールしてもフローティングボックスは固定位置にあるように出来ますでしょうか？altでやったらとのご指摘もあるでしょうがフローティングボックスで実現したいのです。無理なのでしょうか？まだまだ勉強途中で自分のソースも書けないくらいなのですが、勉強のきっかけ？とりかかり方法をご教授いただけないでしょうか？参考のソースもお示しいただけると最高の幸せです。勝手な質問で申し訳ありませんがよろしくお願いします。
- kazh
- お礼率89% (60/67)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
よくわからないですがこんな感じのでしょうか？ <html> <head> <title>????</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> #pop {position:absolute; left:0px; top:0px; width:120px; height:30px;visibility:hidden; background-color: white; border: black solid; border-width: 1px 2px 2px 1px; font-size: 12 px} </style> <script language="JavaScript"> function popUp(){ ps=pop.style; ps.left=event.x; ps.top =event.y; ps.visibility=(ps.visibility=='hidden')?'hidden':'visible'; } </script> </head> <body onContextmenu> <div id="pop">◇◇◇</div> <h1>xxxx</h1> <p><img src="xxx.jpg" width="197" height="197" onMouseover="popUp();return false"> </p> </body> </html> ◇◇◇のところには自分の好きな文字を入れてください。文字数によって上のほうの <style type="text/css"> #pop {position:absolute; left:0px; top:0px; width:120px; height:30px;visibility:hidden; background-color: white; border: black solid; border-width: 1px 2px 2px 1px; font-size: 12 px} </style> この部分の数字を変えてみてください。ちなみにこれは画像をカーソルが通過すると関数が実行されるようになっているはずです。間違っていたことかいて何もならなかったときはごめんなさい。
その他の回答 (2)
- ryifa
- ベストアンサー率50% (1/2)
こんな感じでならできます。 <html> <head> <title>*****</title> <script language="JavaScript"> <!-- function msg1(){ alert("*******************"); window.open('room01.html'); } function msg2(){ alert("*******************"); window.open('room02.html'); } function msg3(){ alert("*******************"); window.open('room03.html'); } // --> </script> </head> <body bgcolor="#000000" text="#ffffff"> <form name="ryifa"> <input type="button" value="押してね♪" onClick="msg1()"> <input type="button" value="押してね♪" onClick="msg2()"> <input type="button" value="押してね♪" onClick="msg3()"> </form> </body> </html> ボタンのところをの <form name="ryifa"> <input type="button" value="押してね♪" onClick="msg1()"> <input type="button" value="押してね♪" onClick="msg2()"> <input type="button" value="押してね♪" onClick="msg3()"> </form> を好きな画像にして アラートの文字の*****を好きな文字にしてみたらいいですよ。 見当はずれでしたらごめんなさい
お礼
ryifaさん本当にありがとうございます。とても感激しています。 この方法も、大変参考になりました。もう少し私のレベルをあげてみようと思います。 たぶん、質問の仕方がなっていないので、ryifaさんが歯がゆい思いをされているのではないかと思います。ごめんなさい。 もう少し・・・・？スクリプトを勉強して、ソースが書けるようになったら、再度質問させていただきます。ryifaさんには５００ポイントくらい付けたいのですが、システム上無理みたいなので・・・。 本当にホントにありがとうございました。これからもよろしくお願いします。
- ryifa
- ベストアンサー率50% (1/2)
申し訳ありません。私もスクリプトはあまり自信ないのでお答えする事が出来ません。 画像を固定すると、その画像をカーソルが通過したときに表示されるメッセージボックスも、ぞの画像の横かなんかに出てこないでしょうか? まったくご希望に応える事ができずに申し訳ありません。メッセージを20個用意しているとするならば、たとえば画像があって、その画像をクリックもしくはカーソルを通過するとアラートがでてきて、そのアラートにその画像に関連する（たとえばその画像をUPした画像のページ）URLをかいていてアラートを閉じるとそのページが開くという感じならできるかもです。ちょっと考えて見ます。
補足
親切な回答ありがとうございます。ＪＡＶＡスクリプトって凄いですね。色々なことができてしまうのですね。はやく私も組める？ようになりたいと思います。 質問の仕方も素人で、用を得なく何をやりたいのか伝わらなくてごめんなさい。ryifaさんの書いていただいたソースをじっくり勉強させていただきます。 できれば・・・・。また、失礼なお願いですが、私のやりたかったことをもう一度書いてみます。アドバイスがいただけたら幸いです。下記のＨＰに「メニューやバナーの位置を固定しよう」というサンプルが載っていますが、このようにスクロールしても常に同じ位置にメッセージを表示するボックス？（領域？）を設置しクリッカブルマップのonMouseoverを組み合わせてポイントされた場所の説明を表示したいと考えています。またクリックすると関連ページへリンクする。これってできるのでしょうか？さらに、失礼ついでに・・・メッセージ（２０個ほど用意しています）が増えていくときの記述方法も教えていただけたら最高です。 http://iswebmag.hp.infoseek.co.jp/sample013.html まことに失礼な質問で申し訳ありませんが、よろしくお願いします。