締切済み

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

2008/07/06 08:49

この下のスクリプトで画像にカーソルがオンマウスになるとその下にボックスが表示されるという構造なのですが、色々試したのですが、ブラウザの解像度、１２８０、１０２８、８００などでもこのオンマウスで表示されるボックスが中央にくるようにしたいのです。レイアウトを統一するためです。 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";} という構文なのですが、この上のものですと１０２８では中央にくるのですが、自宅のワイドモニターですとずれてしまいます。となたか、どんなモニターでもどんな解像度でもこのボックスをいつも中央に表示をするスクリプトを教えていただけないでしょうか。。。自分でも勉強しているのですが、なかなか上手くいかなく困っています。どうか宜しくお願いいたします。

gyrate
お礼率45% (10/22)

JavaScript
回答数5
ありがとう数5

みんなの回答 （5）
専門家の回答

みんなの回答

oka5130
ベストアンサー率66% (35/53)

2008/07/11 01:17 回答No.5

参考までに、#1のコードから縦を真ん中にする処理を抜いたものを使って書いてみました。 #1のコードのまま使うと、完全にページの真ん中になりますので。うまく作動しなかったわけではなく、正しく書けてなかっただけなんじゃないでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"></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>

質問者

お礼 2008/07/12 21:41

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

oka5130
ベストアンサー率66% (35/53)

2008/07/08 00:52 回答No.4

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

質問者

補足 2008/07/10 01:43

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

yambejp
ベストアンサー率51% (3827/7415)

2008/07/06 12:42 回答No.3

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

質問者

お礼 2008/07/08 00:16

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

oka5130
ベストアンサー率66% (35/53)

2008/07/06 12:24 回答No.2

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

oka5130
ベストアンサー率66% (35/53)

2008/07/06 12:22 回答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";

質問者

補足 2008/07/08 00:16

ありがとうございます。しかし、やはりうまく作動しないみたいです。私の説明不足だったのですが。元は全部でこのようなものなのです。ドックを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' } ) } );  </SCRIPT> 現在この上のset.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; この部分を変えてどんな環境でも中央表示にしたいのですが、今回いただいたコードではうまくいかなかったのです、もちろん私の勉強不足なのですが。なのとぞお助けください。よろしくお願いいたします。

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