掲示板/JavaScript質問板/過去ログ/一覧/ ある環境でのエラー/Nullまたはオブジェクトではありません

0 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo: こんにちは。お手数ですが、ご教授下さい。

ある環境で下記ソースの
> if(IE4) msgLay.style.visibility = "hidden";
部分にエラーが出るようです。エラー内容は
「'msgLay.style'はNullまたはオブジェクトではありません。」
という物らしいのですが、私の環境(Windews98、IE6)では確認できず、
デバックしても何も出てこないためお手上げです…。

ネットで拾ってきたサンプルを弄ったのですが、弄り方がマズかったでしょうか？
また、どのような環境でエラーが出るのか分かる方はいらっしゃいますか？
エラーが出る方には直接お聞きする事が出来ない状態ですので、
心当たりのある方にお伺いしたいです。

よろしければご教授下さい。

<html>
<head>
<SCRIPT language=JavaScript>

</SCRIPT>
</head>
<body>
<a href="index.htm" onMouseOver=msgShow(event.x,event.y,0)>○○</A><BR>
<a href="index.htm" onMouseOver=msgShow(event.x,event.y,1)>○○</A><BR>
<a href="index.htm" onMouseOver=msgShow(event.x,event.y,2)>○○</A><BR>
<a href="index.htm" onMouseOver=msgShow(event.x,event.y,3)>○○</A><BR>
<a href="index.htm" onMouseOver=msgShow(event.x,event.y,4)>○○</A><BR>
</body>
</html>

1 名前： いなづき ： 2006/09/13（水） 09:55 ID:3YZaY..q: このサンプルでほんとにエラー出ません？？？
その方がヘンだと思うけど。。。(^^;
IE6+win98でも絶対動かないはずですが？

どう動かしたいのかは知りませんが
javascriptソースの、

msgArr[0] = "<a href="index.htm">○○</A>";
msgArr[1] = "<a href="index.htm">○○</A>";
msgArr[2] = "<a href="index.htm">○○</A>";
msgArr[3] = "<a href="index.htm">○○</A>";
msgArr[4] = "<a href="index.htm">○○</A>";

の部分を以下のように直して、

msgArr[0] = "<a href=\"index.htm\">○○</A>";
msgArr[1] = "<a href=\"index.htm\">○○</A>";
msgArr[2] = "<a href=\"index.htm\">○○</A>";
msgArr[3] = "<a href=\"index.htm\">○○</A>";
msgArr[4] = "<a href=\"index.htm\">○○</A>";

<body>タグの下あたりに、

<script type="text/javascript">

</script>

を入れてあげれば、IEとNN4でエラー無くなるはず。

でも、このサンプル古すぎでは？
firefoxとかOperaとか新しいNetscapeとかじゃ動かないだろうし。

2 名前： NullPo ： 2006/09/13（水） 09:55 ID:XoE1slt9

どの環境でもエラーが出そうですね。
少なくとも私には動いている姿が想定できません。

＞msgLay = document.all.msgLay;
「msgLay」というのがないような気がする。

＞msgArr[0] = "<a href="index.htm">○○</A>";
コーテーションを含めるなら\でエスケープとか、シングルコーテーションとダブルコーテーションを使い分けるとかした方がいいと思われます。

＞<a href="index.htm" onMouseOver=msgShow(event.x,event.y,0)>○○</A><BR>
属性はコーテーションでくくったほうがいいと思うのです。

＞> if(IE4) msgLay.style.visibility = "hidden";
msgHide関数は作ってあるものの呼び出されていないように見える。

以下はIE6でならかろうじて動くソース。(意図どおりかはわからない。
クロスブラウザの対応は私は基本的にやらないのでご自分でどうぞ。

<html>
<head>
<SCRIPT language=JavaScript>
<!--LAYER＋DynamicHTML

// ブラウザ・バージョンチェック
var ver4 = (navigator.appVersion.charAt(0) >= "4");
var NN4 = ver4 && (navigator.appName == "Netscape");
var IE4 = ver4 && (navigator.appName.charAt(0) == "M");
var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName == "Netscape"));

// USER CONFIGURATION
var dx = 0;
var dy = 0;
var bgC = "#FFFFFF";
var wid = 100;
var msgLay;

if(NN3) window.onerror = null;

if(ver4) {
  var msgArr = new Array();
  msgArr[0] = "<a href='index.htm'>○○</A>";
  msgArr[1] = "<a href='index.htm'>○○</A>";
  msgArr[2] = "<a href='index.htm'>○○</A>";
  msgArr[3] = "<a href='index.htm'>○○</A>";
  msgArr[4] = "<a href='index.htm'>○○</A>";
}

function msgShow(x, y, nums) {
  if(NN4) {
    msgLay = document.layers["msgLay"];
    msgLay.left = x + dx;
    msgLay.top = y + dy;
    msgLay.document.open();
    msgLay.clip.width = wid;
    msgLay.document.write("<blockquote><br>" + msgArr[nums] + "</blockquote>");
    msgLay.bgColor = bgC;
    msgLay.document.close();
    msgLay.visibility = "show";
  }

  if(IE4) {
    //msgLay = document.all.msgLay;
    msgLay = event.srcElement.parentElement;
    msgLay.style.posLeft = x + dx;
    msgLay.style.posTop = y + dy;
    msgLay.style.padding = 10;
    msgLay.innerHTML = msgArr[nums];
    msgLay.style.backgroundColor = bgC;
    msgLay.style.visibility = "visible";
  }
}

function msgHide() {
  if(NN4) msgLay.visibility = "hide";
  if(IE4) msgLay.style.visibility = "hidden";
}

//end -->
</SCRIPT>
</head>
<body>

<a href="index.htm" onMouseOver="msgShow(event.x, event.y, 0)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x, event.y, 1)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x, event.y, 2)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x, event.y, 3)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x, event.y, 4)">○○</A><BR>

</body>
</html>

3 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo: いなづきさん、NullPoさんありがとうございます。

> msgArr[0] = "<a href="index.htm">○○</A>";
の部分は、実際のページでは
> msgArr[0] = "<a href=index.htm>○○</A>";
にしてました…質問用のサンプル作るにあたり癖でつけてしまったようです。
すいません…。
> <a href="index.htm" onMouseOver="msgShow(event.x, event.y, 0)">○○</A><BR>
ここは元々つけてませんでした。つけるようにします。

それと同時に大事なものも削っていたようですので、下記に再度提出致します。
また、実際のページの形状に近いようにテーブルをつけました。
ご教授頂ければ幸いです。

させたい動作は、リンクにマウスオンするとポップアップのように
説明文(リンク付き)が出るようにしたいです。

サンプルが古いとは知りませんでした…。検索の上位にあったんですけどね^^；
探しなおした方がいいのでしょうか…。

<html>
<head>
<SCRIPT language=JavaScript>

</SCRIPT>
</head>
<body>
<div id=msgLay style="WIDTH: 100; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px; PADDING-BOTTOM: 10px; POSITION: absolute;"></div>
<TABLE>
<TR>
<TD onMouseOver="msgHide()">■■</TD>
<TD onMouseOver="msgHide()">■■</TD>
</TR>
<TR>
<TD>
<a href="index.htm" onMouseOver="msgShow(event.x,event.y,0)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x,event.y,1)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x,event.y,2)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x,event.y,3)">○○</A><BR>
<a href="index.htm" onMouseOver="msgShow(event.x,event.y,4)">○○</A><BR>
</TD>
<TD onMouseOver="msgHide()">■■</TD>
</TR>
<TR>
<TD onMouseOver="msgHide()">■■</TD>
<TD onMouseOver="msgHide()">■■</TD>
</TR>
</body>
</html>

4 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo: 【訂正】
説明文というよりサブメニューと言った方が良いかもしれません…。

> <a href="index.htm" onMouseOver="msgShow(event.x,event.y,0)">○○</A><BR>
↑を↓にしようともしたのですが、
> <a href="index.htm" onMouseOver="msgShow(event.x,event.y,0)" onMouseOver="msgHide()">○○</A><BR>
サブメニューのリンクをうまくクリック出来ないので、やめました。

お手数ですがご教授ください。

5 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo: 【訂正の訂正】

> <a href="index.htm" onMouseOver="msgShow(event.x,event.y,0)">○○</A><BR>
↑を↓にしようともしたのですが、
> <a href="index.htm" onMouseOver="msgShow(event.x,event.y,0)" onMouseOut="msgHide()">○○</A><BR>
サブメニューのリンクをうまくクリック出来ないので、やめました。

何度も後出しのようですいません…。

6 名前： NullPo ： 2006/09/13（水） 09:55 ID:XoE1slt9: ＞<TD onMouseOver="msgHide()">■■</TD>
先にこの部分にカーソル合わせればエラーが出ますね。
msgLayをオンロードイベントあたりで取得すればいいんじゃないですか？

7 名前： いなづき ： 2006/09/13（水） 09:55 ID:3YZaY..q

msgLayを msgShow()の中でだけしか定義してないでしょ。
だから先にmsgHide()が動くとエラーになるんです。
だからとりあえずエラー回避するなら msgHide() をこうすれば。

function msgHide(){
 if(NN4){
   msgLay = document.layers["msgLay"];
   msgLay.visibility = "hide";
 }else if(IE4){
   msgLay = document.all.msgLay;
   msgLay.style.visibility = "hidden";
 }
}

いずれにしろ動くのはIEとNN4だけですが。

8 名前：匿名： 2006/09/13（水） 09:55 ID:i4s77xzC

>>3
> サンプルが古いとは知りませんでした…。検索の上位にあったんですけどね^^；
DHTML戦争時代ということを勘案しても、使わない方が良い部類だろう。

ともかく、個人レベルでIE4/NN4対応は不要だと思う。
今は標準、もしくは事実上の標準がそれなりに確立されているので、慣れないうちはそっちで組んだ方が無難。
昔と違い、最初からブラウザ振り分け前提で書くとかえって面倒なことになりかねない。

var msgLay, bgC = '#000', msgArr = [
    '<a href=index.htm>○0○<\/a>',
    '<a href=index.htm>○1○<\/a>',
    '<a href=index.htm>○2○<\/a>',
    '<a href=index.htm>○3○<\/a>',
    '<a href=index.htm>○4○<\/a>' 
];

function msgInit() {
    msgLay = document.getElementById('msgLay');
    msgLay.style.position = 'absolute';
    msgLay.style.visibility = 'hidden';
    msgLay.style.padding  = '10px';
    msgLay.style.backgroundColor = bgC;
}

function msgShow(x, y, nums) {
    msgLay.style.left = x + 'px';
    msgLay.style.top  = y + 'px';
    msgLay.style.visibility = 'visible';
    msgLay.innerHTML = msgArr[nums];
}

function msgHide() {
    msgLay.style.visibility = 'hidden';
}

onload = msgInit;

// onmouseover="msgShow(event.clientX, event.clientY, 0)"
// onmouseout="msgHide()"

なお、innerHTMLとvisibility:hiddenを両方使う必要性はないので、本当はどっちか一方に絞った方がいい。
つかまあ、別のを探すのをお奨めしたい（笑

9 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo

NullPoさん、いなづきさん、匿名さんありがとうございます。
定義していない物を消そうとしていたからエラーが出ていたんですね。
サンプル弄るだけでも、もう少しJavaScriptの勉強が必要だと痛感しました…。

サンプルはかなり古い物だそうなので、ブラウザの振り分けをしていない新しいサンプルを探してきました。
onloadの定義も匿名さんのを真似て入れてみたのですが、エラーは出るでしょうか？
自分の環境では出ませんでした。

何かまたしてはいけない弄り方をしていたらご指摘ください。
何度もすみません。

<html>
<head>
<SCRIPT language=JavaScript>
<!--
 // ポップアップヘルプ
 txt = new Array();
  txt[1] = '<table width="80" bgcolor="#999999"><tr><td><a href=index.htm>○1○</A></td></tr></table>';
  txt[2] = '<table width="80" bgcolor="#999999"><tr><td><a href=index.htm>○2○</A></td></tr></table>';
  txt[3] = '<table width="80" bgcolor="#999999"><tr><td><a href=index.htm>○3○</A></td></tr></table>';
  txt[4] = '<table width="80" bgcolor="#999999"><tr><td><a href=index.htm>○4○</A></td></tr></table>';
  txt[5] = '<table width="80" bgcolor="#999999"><tr><td><a href=index.htm>○5○</A></td></tr></table>';

// ヘルプの表示
function popUp(i) {
  ID.innerHTML = txt[i];
  // ヘルプの位置を調整
  ID.style.left = event.x + 10; // 表示するx座標（適度に調整してください）
  ID.style.top = event.y - 5; // 表示するy座標（適度に調整してください）
  ID.style.visibility = "visible";
}

// ヘルプの非表示
function hidePop() {
  ID.style.visibility = "hidden";
}

onload = popUp();

//-->
</SCRIPT>
</head>
<body>
 <SPAN id="ID" STYLE="visibility: hidden; position: absolute;"></SPAN>
 <TABLE>
  <TR>
   <TD onMouseOver="hidePop()">■■</TD>
   <TD onMouseOver="hidePop()">■■</TD>
  </TR>
  <TR>
   <TD>
    <a href="index.htm" onMouseOver="popUp(1)">○○</A><BR>
    <a href="index.htm" onMouseOver="popUp(2)">○○</A><BR>
    <a href="index.htm" onMouseOver="popUp(3)">○○</A><BR>
    <a href="index.htm" onMouseOver="popUp(4)">○○</A><BR>
    <a href="index.htm" onMouseOver="popUp(5)">○○</A><BR>
  </TD>
  <TD onMouseOver="hidePop()">■■</TD>
 </TR>
 <TR>
  <TD onMouseOver="hidePop()">■■</TD>
  <TD onMouseOver="hidePop()">■■</TD>
 </TR>
</body>
</html>

10 名前： NullPo ： 2006/09/13（水） 09:55 ID:XoE1slt9: >>9
＞onload = popUp();
いらない。

11 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo: NullPoさんありがとうございます。
いりませんでしたか…消しておきますね。
何度もありがとうございました。

12 名前： ラブーフ ： 2006/09/13（水） 09:55 ID:mGMjLPPf: なかなか前途多難ですなぁ。
まぁ、最初から何でも分かる人はいないのでがんばって下さい。

　それはそうと、なおさん、ご自分のHPをお持ちなんでしょうか？もしそうであれば、
自分のサイトを訪れるブラウザが、どんなものかは認識しておいた方が良いですよ。
レンタルサーバーとかであれば、詳細なアクセス解析が最初から付いている場合が多いですよね。

　基本的に、IE4だとかNN4だとかLAYERなんて単語が出てきた時点で、そういうサンプルは、古い
サンプル確定ですから、ネット上で見かけても無視していいです。
　せめて、document.getElementById と document.all でブラウザの判別をしているサンプルなら、
まだ救いようはありますが(今はdocument.allは当てになりませんが)。

　ちょっと脱線しましたが、ますは、アクセス解析でブラウザシェアを見てみてください。
IE4.x、Netscape4.xなんて良くて１％あたりでは。ちなみに、うちでは以下の感じ。

　IE6.x 　　　　　　　　63%
　Firefox1.5　　　　　　19%
　Safari　　　　　　　　 5%
　Opera　　　　　　　　 4%
　IE7　　　　　　　　　　2%
　NN4　　　　　　　　　　1%
　IE5　　　　　　　　　0.9%
　IE4　　　　　　　　　0.1%
　NN3　　　　　　　　　0.2%

JavaScriptの動作確認は、Windows環境であれば、FirefoxとIE6/7で確認するのが良いでしょう。
まぁ、会社のイントラネット向けで、古いPCかつ閉じた環境であれば、そう気合を入れなくても
よいのでしょうが。

13 名前：匿名： 2006/09/13（水） 09:55 ID:i4s77xzC

>>9
基本的なこととして

・HTMLにJavaScriptを埋め込むときは、</を書いては駄目という約束事がある。
<\/a>、<\/table>のように書こう。外部なら不要。

・style.left、style.topには単位をつけるという約束事がある。この場合はpxかな。
なぜ単位が必要かといえば、これはCSSのプロパティだから。CSSを知っていれば常識（笑

・event.x、event.yはIE専用。もっともFirefox、Operaも認識はするが。
標準的なのはevent.clientX、event.clientY。特に理由がなければこちらを使おう。

・いきなりID参照可能なのはIE Behavior時のみ、つーかその書き方はひとまず忘れよう。
通常はgetElementByIdなどで、DOMノードとして参照することを明示しなければならない。

var ID;
onload = function() { ID = document.getElementById('ID'); }

つか、上に書いたことは>>8でこっそり直しておいたんだけどね。

ちょっと面倒なこととして

・今回の場合、event.y（event.clientY）を取得するだけでは不十分で、本当はスクロール量を足さなければいけない。
Firefox、Opera、Safariなんかはスクロール量も含めたevent.pageX、event.pageYを持ってるんだけど、これは非標準だしIEは持っていない。
ここでIEとそれ以外をブラウザ分岐させる必要が出てくる。

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

とか使ったらどうだろ。

14 名前：なお： 2006/09/13（水） 09:55 ID:wzfia0zo: お二人ともありがとうございます。

＞ラブーフさん
自分のサイトというと語弊があるのですが、外部向けのページを作っています。
アクセス解析見てみました。
IE6とFirefoxが多いようでした。
(Mozillaと表記されてましたが、検索したところFirefoxのようだったので…)

Firefox流行っているみたいですね。最近よく耳にします。
ダウンロードしてみますね。

IE4とNN4に振り分けがしてあったのは、特殊な仕様のブラウザなのかと思っていました。
LAYERも全く意味がわからず、そのまま使用してました…。

＞匿名さん
いろいろと決まり事があるのですね…またもやあまり良くないサンプルを拾ってしまったようです…；
(ちなみにココです。http://javascript.eweb-design.com/1003_puh.html )

記述する場合は、
> ID.style.left = event.x + 10+'px'; // 表示するx座標（適度に調整してください）
> ID.style.top = event.y - 5+'px'; // 表示するy座標（適度に調整してください）
↑のように表記し、
> var ID;
> onload = function() { ID = document.getElementById('ID'); }
↑を↓の位置に入れればいいのでしょうか。
> onload = popUp();

とりあえず、今までのサンプルは忘れて、提示して頂いたページのサンプルでやってみます。
外部設置のJavaScriptは初めてで少し不安ですが…。
ありがとうございました。