• ベストアンサー

IE6.0でのオブジェクト座標の動的取得

EURの回答

  • EUR
  • ベストアンサー率61% (29/47)
回答No.1

スタイルでtopとleftを指定しないと、 document.getElementById("IMG1").style.top などで取得することはできません。 センタリングを行いたいとのことなので、逆にセンターの場所を割り出すというのはいかがでしょうか？ function MoveToCenter(OBJ) { 　　var WindowWidth = screen.width;//ウインドウ幅 　　var ObjectWidth = OBJ.width;//画像等の幅 　　OBJ.style.left = (WindowWidth / 2) - (ObjectWidth / 2); } <body onLoad="MoveToCenter(document.getElementById('IMG1'))" onResize="MoveToCenter(document.getElementById('IMG1'))"> … <A href="www.aaa.com" onMouseOver="zahyou()"> <IMG src="aaa.gif" id="IMG1" style="position: absolute;"> …

MO2004
質問者

お礼

ありがとうございます！！確かにセンターからの位置関係で取得出来ますね♪参考になりました。

この回答がついた質問に戻る
回答 全件
ベストアンサー
offsetTop,offsetLeftなどで取得できます。（参考UR…
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • objectの座標が取れない。

    JavaScriptを利用して、画面に仕込んだタグをポップアップのように 呼び出したいと思っています。 以下、概略ですが <div id ="test1" style="display:none;">テスト</div> <a href="javascript:balOpen(this,number)">呼び出し</a> 以下js function balOpen(obj,number) { document.getElementById('test' + number).style.display = 'block'; var positionX; var positionY; positionX = getLocation(obj, 'X'); positionY = getLocation(obj, 'Y'); } 画面をスクロールした際でも、画面中央に出したいので、座標を見て tes1のleftとtopを調整したいと思っています。 しかし、上記のような書き方をしても、X、Yの座標が取れず困っています。 何か良いやり方があれば教えていただけないでしょうか。 宜しくお願いします。

  • hoverとmouseoverを連動させるには？

    お世話になります。 リンクテキストにはスタイルシートでhover設定を行い、gifにはonMouseOverで別の色のgifを読み込ませています。 onMouseOverイベント時にはリンクのhoverがちゃんと行われるのですが、テキスト側にマウスを当てた時、gifのonMouseOverが発生するように （連動してgifの色が変わるように）するにはどのようにしたらよろしいのでしょうか？ ソースの一部を乗せます <A HREF="help.html"><IMG SRC="img/bul1.gif" BORDER="0" onMouseOver="this .src='img/bul2.gif'"onMouseOut="this .src='img/bul1.gif'" ALIGN="LEFT">&nbsp;リンクテキスト</A></FONT> よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像の座標位置取得

    javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。（まだ初めて一週間程度の初心者です…） マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい） 例えば… function lyrGetTop(lyr){ return( parseInt( document.getElementById(lyr).style.pixelTop ) ); } で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内（？）の位置から取得することができません…。 どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか？ それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。 <html> <head> <title></title> <script language="JavaScript"><!-- y = 450; interval = 20; function moveBall(){ y = y - interval; document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24; document.getElementById("ball").style.pixelTop = y; document.getElementById("ball").style.visibility = "visible"; if( (y < 10) ){ document.getElementById("ball").style.visibility = "hidden"; document.getElementById("ball").style.pixelTop = getlyrtop("ber"); return 0; } } function getlyrtop(lyr){ return(parseInt(document.getElementById(lyr).style.pixelTop)); } function getlyrleft(lyr){ return(parseInt(document.getElementById(lyr).style.pixelLeft)); } // --></script> </head> <body onclick="setInterval('moveBall()',1)"> <img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;"> <img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/> </body> </html> これだと、連射どころか、二回目のクリックに反応すらしないんです…。 どうかご教授お願いします。

  • 【span,vertical-alignの動作】

    Webサイトのヘッダー部分によくある横並びのボタンを画像で用意しようと思うのですが、左端の画像はボタンより縦に大きいサイズのロゴを入れたいのです。 すると、横に並ぶボタンはロゴの底部に揃って並びますが、これらのボタンを指定のピクセル上に移動させて表示したいと考えています。これはvertical-align: middle;ではなく、任意の数値で動かしたいです。 また、ロゴは左端のままで、ボタン画像はセンタリングさせたいとも考えています。そこで、 <span class="head"><a href="x"><img src="y"></a><a href="x2"><img src="y2"></a><a href="x3"><img src="y3"></a></span> <style type="text/css"> .head { text-align:center; } </style> ひとまず自分で調べつつ上記のように書いてみましたが、Web上ではセンタリングしてくれません。教えて頂きたい要点としては、 1.任意のpx数を指定して横並びの画像を上下揃えする方法 2.一行内の部分的なセンタリングにおける上記構文の誤りのご指摘 になります。なにぶん素人ですので、気づいていないこともあるかと思います。 どうぞお願いします。

    • 締切済み
    • CSS
  • IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）

    こんにちは、質問させて下さい。 現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • スタイルシートで画像を中央によせる方法

    <center> <img src="image.gif"> </center> みたいなことをスタイルシートでしたいのですがどのようにすればよいでしょうか <img style="xxxx" src="image.gif"> などの方法でセンタリングできる方法を教えてください。

    • ベストアンサー
    • HTML
  • 外部ファイルの記述の仕方

    HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>

  • 外部ファイルについて

    JavaScriptやCSSなどHEAD内に書き込むものなら外部ファイルにできますよね？ ではBODY部に書くものは？？ <BODY> 　　　： <DIV ID="MENU" STYLE="POSITION:ABSOLUTE; TOP:0; LEFT:0;"> <IMG SRC="../img/var.jpg" NAME="VAR" WIDTH=101% HEIGHT=25 STYLE="filter:Alpha(opacity=40);" onMouseOver="change(this,100);" onMouseOut="change(this,40);"> <SPAN STYLE="POSITION:ABSOLUTE; TOP:8; LEFT:10"> <A HREF="../default.htm"> <IMG SRC="../img/0101.gif" NAME="image01" BORDER=0></A> </SPAN> 　　　： </DIV> となってるんですが、 <DIV>～</DIV> の間を外部ファイルにしたいんです。 このようなことはできますか？

    • ベストアンサー
    • CSS
  • Excelセル内の特定座標に画像を表示させたいのですが。

    Excelの指定したセルの、 （セル左上座標を基準に）座標を指定して GIFやBMPなどの画像を表示させたいのですが、 分からなくて困っています。 セル内での座標指定またはセル内でのセンタリングの方法が分かる方は居ないでしょうか？ 今の時点では指定したセルの左上に表示されてしまいます。 ソースはこんな感じなのですが・・・ with sheet .Cells(2,3).Select img="c:\test.gif" .Pictures.Insert(img).Select .Selection.Left =50 end with

  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する