以前に、MdNの「リンクにマウスオーバーするとポップアップで説明が表示される」というサンプルの記述がうまく動作しないという質問で、FairefoxやSafariではその回答でうまく動作するようなのですが、IEの動作がまだ駄目なようなのです。

IEのイベントが発生した時のマウス座標の取得は、Javascriptで、

function OnScreenHelp(x,y){
if(document.all) {
/* IEでの処理 */
document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15;
document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0;
}else{
            /* IE以外の処理 */
document.getElementById(strID).style.left = x + 15 + "px";
document.getElementById(strID).style.top = y + 0 + "px";

}
}
のような記述になっているのですが、関数OnScreenHelp(x,y)のx,yがbodyの本文内で、event.pageX、event.pageYのようにNN系の記述になっているため、IEではこのx,yの値は使えないので上記のような記述になっているようなのです。上記の記述ではうまくポップアップしてくれないので、
event.xやevent.yの所の記述がまずいのかな?と思って、ちょっと調べてみて、window.event.offsetXやwindow.event.offsetYに変更してやってみたのですが、うまくいきません。ここの所の、IEの記述としては、どのように記述したらよいか分かりかねています。ご経験のある方、ご教示願えたらと思います。

よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

「ウィンドウ位置」ではなく「カーソルの位置」ではないかと思いますが、それはおいておいて、




ここ(↓)に参考になると思われる情報があります。
 http://www.tagindex.com/kakolog/q4bbs/1501/1866. …

この回答への補足

すいません、聞きたいことが明確になっていませんでした。
今、問題になっていることを整理すると、

Javascriptの記述は下記のように書いています。
//ここから
<script type="text/javascript"><!--
var strID;
function OnScreenHelp(x,y){
if(document.all) {
document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15;
document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0;
}else{
document.getElementById(strID).style.left = x + 15 + "px" ;
document.getElementById(strID).style.top = y + 0 + "px" ;
}
document.getElementById(strID).style.display = "";
}
function OffScreenHelp(){
document.getElementById(strID).style.display = 'none';
strID = "";
}
//--></script>
//ここまで

//CSSの記述の一部抜粋
//ここから
.waku2 {
margin: 0;
padding: 10px 10px;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.waku2 .image2 {
position: relative;
top: -102px;
left: 340px;
}
//ここまで

//htmlのbody内の記述
//ここから
<div class="waku2">
<img src="../images/image1.png" width="100%" border="1"/>
<span class="Help" style="display:none;z-index:1000" id="test">ポップアップで表示したい文字の記述</span>
<a href="#" onmouseover="strID='test';OnScreenHelp(event.pageX,event.pageY);" onmouseout="OffScreenHelp()"><p class="image2">リンクを張る文字列</p></a>
</div>
//ここまで

この記述で動作させると、FirefoxやSafariはOKなのですが、IEがポップアップ表示されません。
ちなみに、body内の記述の、
<p class="image2">リンクを張る文字</p>

<p>リンクを張る文字</p>
に変更すると、IEでも正常にポップアップ表示がされます。(class="image2"の記述で「リンクを張る文字」の位置をCSSの記述で相対的にimage1の画像内にシフトすると何故かIEのポップアップ表示だけが行われなくなってしまうのです。)

多分CSSの書き方に関係してように思われますが、どなたか分かる方、ご教示ください。
よろしくお願い致します。

補足日時:2011/04/08 18:00
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報