締切済み

宣言文とjavascript

2007/07/17 13:33

javascriptでチップヘルプを表示させています。文字にマウスが乗れば説明文が表示されるものです。こちらの宣言文を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 下記のもの <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> に変更すると、チップヘルプが上手く表示されません。指定した位置より、かなり離れてしまいます。ブラウザ別（IEとFirefox）で確認したところ、Firefoxでは表示もされないようになります。こちらを解消する方法はあるのでしょうか？

kuroro0000
お礼率52% (11/21)

HTML
回答数5
ありがとう数2

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

みんなの回答

himajin100000
ベストアンサー率54% (1660/3060)

2007/07/19 02:47 回答No.5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <script type="text/javascript"> function TooltipFlip(obj,id){ var Tooltip = document.getElementById(id); if (Tooltip.style.display == "none"||Tooltip.style.display == ""){ var X; var Y; obj.style.position = "absolute"; X = obj.offsetLeft; Y = obj.offsetTop; obj.style.position = "relative"; Tooltip.style.position = "absolute"; Tooltip.style.left = 15 + X + "px"; Tooltip.style.top = 10 + Y + "px"; Tooltip.style.opacity = 0.3; Tooltip.style.display = "block"; Tooltip.style.filter = "alpha(Opacity='30')"; } else{ Tooltip.style.display = "none"; } } </script> <style type="text/css"> body{ height:700px; background-color:yellow; } p{ background-color:pink; width:80%; } #tooltipbundle p{ width:30%; display:none; background-color:orange; } .tooltip{ background-color:red; } </style> </head> <body> <p><span class="tooltip" onclick="TooltipFlip(this,'fuga');">今日の朝飯</span>は不味かった。腹の調子が悪い。</p> <p>不味かったといえば<span class="tooltip" onclick="TooltipFlip(this,'gura');">昨日の晩飯</span>は不味かった。</p> <div id="tooltipbundle"> <p id="fuga">賞味期限切れの納豆</p> <p id="gura">泥団子</p> </div> <p>なんだかよくわからなかったから全部書き直してみた。leftやtopには単位"px"がないといけない。</p> </body> </html>

質問者

お礼 2007/07/19 10:08

わざわざ書き直して頂いてありがとうございます。なんとなくヒントになったような気がします。いろいろと試してみます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2007/07/18 22:12 回答No.4

調べてみないとわかりませんが、 element.topとか、標準モードでは使えなかったと思います。それ以外にもいくつか互換モードでは使えるが標準モードでは使えないプロパティや、それとは逆に標準モードでは使えるが互換モードでは使えないプロパティもありますので、標準モードと互換モードの両方をサポートするなら、それら全てを考慮しないと行けません。スタイルシートを使っても、その解釈の仕方が違うことがありますから、文法上は正しくても表示は異なることがありますので、注意して下さい。新しいメジャーなブラウザは、互換モードではCSS1、標準モードではCSS2が使われます。

質問者

お礼 2007/07/19 10:06

ご回答ありがとうございます。双方のモードでサポートの考慮と言うわけではなかったんですが、モードの違いで記述が異なるようですね。自分はjavascriptの専門ではないので、ただ単にコピペして使用していたのですが、某HPのガイドラインで宣言文を変更しなくてはいけなくなりまして・・・。どちらにせよ、互換モード、標準モードも相違にあるようですね、原因は。少し弁口してみます。

PED02744
ベストアンサー率40% (157/390)

2007/07/17 14:17 回答No.3

loose.dtdを指定したら、「標準モード」になって、何もつけないと「互換モード」になります。「互換モード」で表示されて「標準モード」で正しく出ないのであれば、cssの記述がおかしい(指定している位置がおかしい)のではないでしょうか。

noname#39970

2007/07/17 13:49 回答No.2

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html

himajin100000
ベストアンサー率54% (1660/3060)

2007/07/17 13:39 回答No.1

そんなん実際のjavascriptのコード見てみないとわからないよ(笑) title属性を使っているっていうんでもないんでしょ？できるだけ状況が再現する短いコードを回答者に示してくれなきゃ。こっちで再現できれば調べてみるけどね。 http://japanese.joelonsoftware.com/Articles/PainlessBugTracking.html http://developer.mozilla.org/ja/docs/Bugzilla-jp:Guide

質問者

補足 2007/07/17 14:50

ちょっと長いですかね？どこに原因があるか分からないので。基本的にCSSでは位置指定してません。 timerID = 0; sec = 20 * 1000; var o=30; var Win = navigator.userAgent.indexOf('Win')!=-1; var Mac = navigator.userAgent.indexOf('Mac')!=-1; var X11 = navigator.userAgent.indexOf('X11')!=-1; var Moz = navigator.userAgent.indexOf('Gecko')!=-1; var Safari = navigator.userAgent.indexOf('Safari')!=-1; var msie = navigator.userAgent.indexOf('MSIE')!=-1; function MM_showHideLayers() { //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } function b_color(idname,cn){ if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; } } function replace_css(id,url){ if(!document.getElementById) { return false; } var element = document.getElementById(id); if(!element || !element.cloneNode) { return false; } var new_node = element.cloneNode(true); new_node.href = url; element.parentNode.replaceChild(new_node,element); return true; } function sDomChipHelp(divID,eventOBJ) { var offX = offY = 0;var x;var y; if (document.all) { //IE x=eventOBJ.x; y=eventOBJ.y; chipOBJ = document.all[divID].style; offX = document.body.scrollLeft; offY = document.body.scrollTop; chipOBJ.visibility = "visible"; switch (divID) { case 'popc001': chipOBJ.left = x +10 + offX; chipOBJ.top = y +10+ offY; break; } } else { // Not IE x=eventOBJ.pageX; y=eventOBJ.pageY; if (document.layers) { // ? chipOBJ = document.layers[divID]; } else { // Netscape 7 Win chipOBJ = document.getElementById(divID).style; } chipOBJ.visibility = "visible"; switch (divID) { case 'popc001': chipOBJ.left = x+15; chipOBJ.top = y+10; break; default: chipOBJ.left = x; chipOBJ.top = y; } } timerID = setTimeout("hChipHelp('"+divID+"')",sec); } function hChipHelp(divID) { if (document.all) { // IE chipOBJ = document.all[divID].style; } else { // Not IE if (document.layers) { // ? chipOBJ = document.layers[divID]; } else { // Netscape 7 Win chipOBJ = document.getElementById(divID).style; } } chipOBJ.visibility = "hidden"; clearTimeout(timerID); } function fade(obj,v) { if (document.all) { //IE obj.filters["alpha"].enabled = true; obj.filters["alpha"].style = 0; if (v) { obj.filters["alpha"].opacity = o; } else { obj.filters["alpha"].opacity = 100; } } else { // Not IE if (Moz) { if (v) { document.getElementById(obj.name).style.MozOpacity = 0.3; } else { document.getElementById(obj.name).style.MozOpacity = 1; } } else { obj.filters["alpha"].enabled = true; obj.filters["alpha"].style = 0; if (v) { obj.filters["alpha"].opacity = o; } else { obj.filters["alpha"].opacity = 100; } } } }

宣言文とjavascript