• 締切済み

オンマウスでボックス表示を中央に表示

この下のスクリプトで画像にカーソルがオンマウスになるとその下に ボックスが表示されるという構造なのですが、色々試したのですが、 ブラウザの解像度、１２８０、１０２８、８００などでもこのオンマウスで表示されるボックスが中央にくるようにしたいのです。 レイアウトを統一するためです。 function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.clientWidth/4; set.style.posTop =document.body.clientHeight; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} という構文なのですが、この上のものですと１０２８では中央にくるのですが、自宅のワイドモニターですとずれてしまいます。 となたか、どんなモニターでもどんな解像度でもこのボックスをいつも中央に表示をするスクリプトを教えていただけないでしょうか。。。 自分でも勉強しているのですが、なかなか上手くいかなく困っています。どうか宜しくお願いいたします。

みんなの回答

  • oka5130
  • ベストアンサー率66% (35/53)
回答No.5

参考までに、#1のコードから縦を真ん中にする処理を抜いたものを使って書いてみました。 #1のコードのまま使うと、完全にページの真ん中になりますので。 うまく作動しなかったわけではなく、正しく書けてなかっただけなんじゃないでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"><!-- function show( text ) { var el = document.getElementById( "box" ); document.getElementById( "text" ).innerHTML = text; el.style.visibility = 'hidden'; el.style.display = 'block'; var width = el.clientWidth; el.style.display = 'none'; el.style.visibility = 'visible'; el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.display = 'block'; } function hide() { var el = document.getElementById( "box" ); el.style.display = 'none'; } //--></script> <html> <body> <p> <a href="#" onmouseover="show('あ');" onmouseout="hide();">1</a> <a href="#" onmouseover="show('かき');" onmouseout="hide();">2</a> <a href="#" onmouseover="show('さしす');" onmouseout="hide();">3</a> <a href="#" onmouseover="show('たちつてと');" onmouseout="hide();">4</a> </p> <div id="box" style="position: absolute; display: none;"> <table id="box" width="530" height="300" border="1" style="border: 1px dotted #333333; background-color: #E0E0E0;" cellspacing="1" cellpadding="20"> <tr> <td style="background-color: #CCFFCC"><span id="text"></span></td> </tr> </table> </div> </body> </html>

gyrate
質問者

お礼

本当にありがとうございます。たしかに正しく書けていなかったです。書いていただいたコードをよく見て勉強させていただきます。 このように書くと位置の調節も自分で設定できるようですので、 実際はDockを置いた場合、Dockにオンマウスをするとアイコンが大きくなるのでポップアップのボックスと重なってしまうので、今度は縦の調節をしてみました。 大変勉強させていただきありがとうございました。 重ねて御礼を申しあげます。

  • oka5130
  • ベストアンサー率66% (35/53)
回答No.4

お使いになっているのは「CSS Dock Menu」というものでしょうか？ http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html ただ単にコードを貼り付けるだけでは何のことかわかりませんので、 どういうライブラリを使っていて、どのように改造したいのかを もう少し詳しく書いてください。 上記のサンプルページにあるようなDockの動きに加えて、 画面中央（ど真ん中でいいんでしょうか？）にマウスオーバーしている アイコンを表示させたいということですか？

gyrate
質問者

補足

すみません。そうですおっしゃるように上記のページのドックです。 これを、 http://lll.s21.xrea.com/m/link/38.html このページのように、ドックの中の１つ１つにオンマウスにすると その説明が出てくるというものですが、これを改造して、どんなモニターの解像度、(ワイドモニタ）でもど真ん中に表示させたいのですが、 （上記サイトのものですと、オンマウスしたリンクの文字から常にちょっと右にずれて表示しています。） マウスオーバーしているアイコンを真ん中に表示ではなくて、 別の枠の中に文字が入っているボックスをそれぞれのドックの中にある アイコンの説明として表示させたいということなです。 説明不足で本当に申しわけありません。 お手数ですがご宜しくお願いいたします。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

これって、表示のきりかえだけjavasriptにまかせ あとはcssでセンタリングすればよいのでは？ ちなみにallはブラウザ依存なので使わないほうがよいですね。

gyrate
質問者

お礼

ありがとうございます。しかし、それではうまく作動しません。どうしてなのか考えています。。。。。

  • oka5130
  • ベストアンサー率66% (35/53)
回答No.2

すみません、式を書き間違えました…。 左位置 = (bodyの幅 - 要素の幅) / 2 + 横スクロールの左位置 上位置 = (bodyの高さ - 要素の高さ) / 2 + 縦スクロールの上位置

  • oka5130
  • ベストアンサー率66% (35/53)
回答No.1

まず、表示したい要素の位置（style.left, style.top）の計算方法ですが、 絵を描いてみるとわかると思いますが、次のようになります。 （スクロールの位置は、スクロールしていなければ0になります。） 左位置 = (bodyの幅 + 要素の幅) / 2 + 横スクロールの左位置 上位置 = (bodyの高さ + 要素の高さ) / 2 + 縦スクロールの上位置 ただし、要素の幅（clientWidth）や高さ（clientHeight）は、 displayがhiddenの状態では取得することができません。（0になります） そこで、位置を計算する前にdisplayをblockに変えてやる必要があるのですが、 そうしてしまうと一瞬変な位置に表示されてしまうので、幅と高さを取得する時だけ visibilityをhiddenにし、displayをblockにします。 // 表示させたい要素を<div id="hoge"></div>とします var el = document.getElementById("hoge"); el.style.visibility = "hidden"; el.style.display = "block"; var width = el.clientWidth; var height = el.clientHeight; el.style.display = "none"; el.style.visibility = "visible"; el.style.left = (document.body.clientWidth - width) / 2 + document.body.scrollLeft; el.style.top = (document.body.clientHeight - height ) / 2 + document.body.scrollTop; el.style.display = "block";

gyrate
質問者

補足

ありがとうございます。しかし、やはりうまく作動しないみたいです。私の説明不足だったのですが。元は全部でこのようなものなのです。ドックをCSSにて、そこをオンマウスで下にボックス表示ということをしたいのですが、元々のこの構文だと、位置がずれてしまうので、どんな環境でも中央に表示がしたいということなのです。 以下ながくなりますが、コードを書いてみます。 <div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="CrackAndHack_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="FolderOpenGreen_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="FolderOpenRed_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="Fonts_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="GraphicDesign_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="Internet_128.png" /><span>フtest</span></a> <a class="dock-item" href="#" target="blank" onmouseover="up('説明文を記入。')"; onMouseout="kes()"><img src="Themes_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('test')"; onMouseout="kes()"><img src="Updates_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('説明文を記入。')"; onMouseout="kes()"><img src="Utilities_128.png" /><span>test</span></a> <a class="dock-item" href="#" onmouseover="up('説明文を記入。')"; onMouseout="kes()"><img src="WAVFile_128.png" /><span>RSS2</span></a> </div> </div> </div> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);text-align:center;" ID="set" > <TABLE width="530" height="300" BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#ccffcc"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV> <script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 40, proximity: 90, halign : 'center' } ) $('#dock2').Fisheye( { maxWidth: 60, items: 'a', itemsText: 'span', container: '.dock-container2', itemWidth: 40, proximity: 80, alignment : 'left', valign: 'bottom', halign : 'center' } ) } ); <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> 現在この上のset.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; この部分を変えてどんな環境でも中央表示にしたいのですが、 今回いただいたコードではうまくいかなかったのです、もちろん私の勉強不足なのですが。 なのとぞお助けください。よろしくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 『オンマウスで説明文を表示』について

    http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか？ お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

  • Firefoxでマウス座標の取得

    クリッカブルマップのマウスオーバー時にdivを表示させようと、以下のようなコードを書きました。 これだとFirefoxに対応していないのですが、どうやったら同じように座標を取得できるのかわかりません。 どなたかご教示をお願いします。 <script type="text/javascript" language="JavaScript"> <!-- function up(text){ document.getElementById('key').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.offsetX+150; set.style.posTop =document.body.scrollLeft+window.event.offsetY+250; document.all('set').style.display="block"; } function del(){ document.all('set').style.display="none"; } //--> </script>

  • オンマウスで表示されるサブメニューについて

    よろしくお願い致します。 メインメニューにオンマウスすると、サブメニューが表示される ようにしたく、下記のようなコードを使用しています。 FirefoxやsSafariで起きる問題なのですが、サブメニューを表示 した状態で他のページに移動後、ブラウザのバックを使用しても 戻ってきたとき、移動前に表示していたサブメニューが開いたまま になっており、その後ずっと開いたままで非表示にならないことが あります。 色々試してみたのですが、うまく行かず困っています。 どうか解決策をお教え下さいますようお願い致します。 <html> <head> <script type="text/javascript"> <!-- function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } window.onload = function() { document.getElementById(targetID).style.display = "none"; }; //--> </script> </head> <body> <a href="#" onMouseOver="showHide('subnavi');return false;">メインメニュー</a> <div id="subnavi" style="display:none;"> <a href="http://www.yahoo.co.jp/">サブメニュー</a> </div> </body> </html>

  • サファリでポジション指定のJavascriptがうまく作動しません

    詳しい方ぜひお力をお借りしたいのですが。 以前IE用で教えていただいたオンマウスでボックスを中央に配置する スクリプトを教えていただいたのですが、Safariですとこれがうまく 作動してくれません。IEではどんなモニタの大きさでもど真ん中にいくのですが、Safariですと左に寄ってしまうのです。 これをSafariでも正常に機能させるにはどのような記述にすればよいのかを考えていましたがうまくいかないので質問させていただきます。 function show( text ) { var el = document.getElementById( "box" ); document.getElementById( "text" ).innerHTML = text; el.style.visibility = 'hidden'; el.style.display = 'block'; var width = el.clientWidth; el.style.display = 'none'; el.style.visibility = 'visible'; el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + document.body.scrollTop; el.style.display = 'block'; } function hide() { var el = document.getElementById( "box" ); el.style.display = 'none'; } で、 el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + この部分でIEでは問題ないのですが、Safariでは機能しません。 どうかお助けください。 よろしくお願いいたします。

  • 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？

    複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。

  • javascriptでボックスの表示非表示

    javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。 以下のようにしてみましたが、ie9ではできたのですが、 ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。 何か解決方法があれば教えてください。 よろしくお願いいたします。 <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.display = "none"; div2.style.display = "block"; }; div2.onmouseout = function() { div1.style.display = "block"; div2.style.display = "none"; }; div1.style.display = "block"; div2.style.display = "none"; }; </script> <div id="div1" class="box01"> <div id="pic"><img src="image01.gif"></div> <div id="txt">てきすとてきすと</div> </div> <div id="div2" class="box02"> <div id="pic"><img src="image02.gif"></div> <div id="txt">てきすとてきすと</div> </div>

  • ラジオボタンではなくセレクトボックスで表の表示切換

    セレクトボックスで表の表示非表示を選択できるようにしたいです。最初は非表示で。jsで。 以下はその分です。 どこを変えたらいいですか。 <script type="text/javascript"> function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } function Click_idccc() { 　　if (document.all.idccc.checked==true) { 　　　　document.all.ccc.style.display = "block" 　　} else { 　　　　document.all.ccc.style.display = "none" document.getElementById('lng').innerHTML=tmp2; document.getElementById('table').innerHTML=tmp3; } </script> <div> <p> <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ <input id ="idccc" type="checkbox" name="sashisuseso"onclick="Click_idccc()">さしすせそ </p> <div id="bbb" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> <div id="ccc" style="display:none;"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル３<p></p></td></tr> 　</table> </div>

  • 表示と非表示

    下のような物があったときに、１を押したときに１が現れるのですが、続けて２を押したときに１と２が表示されてしまいます。 この時に、２を押したら、１を非表示にして２だけを表示したいのですが、可能でしょうか？ よろしくお願い致します。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function apper(sLayers) { if (document.all) { if (document.all(sLayers).style.display=='inline') {　 document.all(sLayers).style.display='none'; } else { document.all(sLayers).style.display='inline'; } } return (false); } // --> </SCRIPT> <style type="text/css"> span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } // --> </style></HEAD> <BODY> <a href="" onClick="return apper('1')">質問１</a><br> <a href="" onClick="return apper('2')">質問２</a><br> <a href="" onClick="return apper('3')">質問３</a><br> <span class="hidden" id="1">1<br></span> <span class="hidden" id="2">2<br></span> <span class="hidden" id="3">3<br></span> </BODY></HTML>

  • javascriptがChromeで機能しません

    ご質問させていただきます。 リンクにオンマウスするとカーソルのそばにバナーを表示させるjavascriptをHTMLに組み込みました。 IEでは正常に機能するのですが、Chromeではバナーがカーソルのそばではなくページの一番左上に表示されてしまいます。 どのようにソースを記述すれば改善されるのか、教えていただけないでしょうか。 javascriptに関しては初心者なので、困っております。 何卒宜しくお願い致します。 因みに、javascriptは http://lll.s21.xrea.com/m/link/38.html を参考にして書きました（ここでは、Chromeでオンマウスすると文章が一番右下に表れてしまいます）。 <html> <head> <script type="text/javascript"> <!-- function on(text) { document.getElementById('banner').innerHTML=text; frame.style.posLeft =document.body.scrollLeft+window.event.clientX+10; frame.style.posTop =document.body.scrollTop+window.event.clientY-10; document.all('frame').style.display="block"; } function off() { document.all('frame').style.display="none"; } // --> </script> <div style="border:1px solid #ddd; background:#fff; padding:5; display:none; position:absolute;" id="frame"><span id="banner"></span></div> </head> <body> <a href="サイトアドレス" target="_blank" onmouseover="on('<img src=\'バナーアドレス\'>')"; onmouseout="off()">サイト名</a> </body> </html>

  • 初期状態でテーブルの非表示

    JavaScript初心者です。 チェックボックスをチェックされたときだけ テーブルを表示させるようにしたいのです。 いろいろ調べながらようやく出来たのですが、 最初にテーブルを非表示にしたいのに出来ません。 style="display:none"を指定すると非表示になるのではないのでしょうか？なにが間違っているのでしょうか？他の記述があるのでしょうか？ function Click_idaaa() { 　　if (document.all.idaaa.checked==true) { 　　　　document.all.aaa.style.display = "block" 　　} else { 　　　　document.all.aaa.style.display = "none" 　　} } function Click_idbbb() { 　　if (document.all.idbbb.checked==true) { 　　　　document.all.bbb.style.display = "block" 　　} else { 　　　　document.all.bbb.style.display = "none" 　　} } <body> <div> <p><input id ="idaaa" type="checkbox" name="aiueo" 　　onclick="Click_idaaa()">あいうえお <input id ="idbbb" type="checkbox" name="kakikukeko"onclick="Click_idbbb()">かきくけこ</p> </div> <div id="aaa" style="display:none:"> 　<table border="1" class="input"> 　　<tr><th><font size="-1">■テーブル１</font></th><td> 　　<input type="text" name="textfieldName" size="24"></td></tr> 　</table> </div> <div id="bbb" style="display:none:"> 　<table border="1" cellspacing="2" cellpadding="0"> 　　<tr><td>テーブル２<p></p></td></tr> 　</table> </div> </body> 上記で行き詰ってしまい他の方法でと思い、 <body onload="Click_idaaa():Click_idbbb()"> と指定して非表示にさせようとしても出来ませんでした。 複数指定は：ではないのでしょうか？ どの方法でもいいのでテーブル1と2を初期状態で非表示にしたいのです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する