宣言文とjavascript

締切済

質問者：kuroro0000
質問日時：2007/07/17 13:33
回答数：5件

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では表示もされないようになります。

こちらを解消する方法はあるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： himajin100000
回答日時：2007/07/19 02:47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2007/07/19 10:08

No.4

回答者： taloo
回答日時：2007/07/18 22:12

調べてみないとわかりませんが、

element.topとか、標準モードでは使えなかったと思います。

それ以外にもいくつか互換モードでは使えるが標準モードでは使えないプロパティや、
それとは逆に標準モードでは使えるが互換モードでは使えないプロパティもありますので、
標準モードと互換モードの両方をサポートするなら、
それら全てを考慮しないと行けません。

スタイルシートを使っても、その解釈の仕方が違うことがありますから、
文法上は正しくても表示は異なることがありますので、注意して下さい。
新しいメジャーなブラウザは、互換モードではCSS1、標準モードではCSS2が使われます。

- 0
- 件

通報する

この回答へのお礼

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

どちらにせよ、互換モード、標準モードも相違にあるようですね、原因は。
少し弁口してみます。

通報する

お礼日時：2007/07/19 10:06

No.3

回答者： PED02744
回答日時：2007/07/17 14:17

loose.dtdを指定したら、「標準モード」になって、何もつけないと「互換モード」になります。

「互換モード」で表示されて「標準モード」で正しく出ないのであれば、cssの記述がおかしい(指定している位置がおかしい)のではないでしょうか。

- 0
- 件

通報する

No.2

回答者： noname#39970
回答日時：2007/07/17 13:49

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/A …

- 0
- 件

通報する

No.1

回答者： himajin100000
回答日時：2007/07/17 13:39

そんなん実際のjavascriptのコード見てみないとわからないよ(笑) title属性を使っているっていうんでもないんでしょ？

できるだけ状況が再現する短いコードを回答者に示してくれなきゃ。
こっちで再現できれば調べてみるけどね。

http://japanese.joelonsoftware.com/Articles/Pain …
http://developer.mozilla.org/ja/docs/Bugzilla-jp …

この回答への補足

ちょっと長いですかね？どこに原因があるか分からないので。
基本的に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;
}
}
}
}