WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:クリッカブルマップのマウスオーバー

0:[投稿] おうじ [2005/10/25 13:33 ] [環境:IE6,WIN2000 ?]

クリッカブルマップの指定したエリアにカーソルをもっていくと、
テキストエリアに情報が表示されるというソースを書いたんですが、ページの
エラーが出てしまいます・・・。
原因がわからないので、どなたか助けていただけますでしょうか??

<HEAD>
<script type="text/javascript">
<!--
  var descLine1;
  var descLine2;
  var descLine3;
  var descLine4;
  var descLine5;
  function showDesc(str1, str2, str3, str4, str5) {
    descLine1.value = str1;
    descLine2.value = str2;
    descLine3.value = str3;
    descLine4.value = str4;
    descLine5.value = str5;
  }
  function descEntry() {
    descLine1 = document.linkDesc.descL1;
    descLine2 = document.linkDesc.descL2;
    descLine3 = document.linkDesc.descL3;
    descLine4 = document.linkDesc.descL4;
    descLine5 = document.linkDesc.descL5;
  }
//--></script>
</HEAD>


<BODY>
<img src="map.gif" usemap="#map1"></div>
<map name="map1">

<area shape="polygon" coords="100,100,150,150,200,200" onMouseOver="showDesc('情報1','情報2','情報3','情報4','情報5')" onmouseout="showDesc(' ',' ',' ',' ',' ')">

<form action="." name="linkDesc">
<p><input type="text" value=" " name="descL1"></p>
<p><input type="text" value=" " name="descL2"></p>
<p><input type="text" value=" " name="descL3"></p>    
<p><input type="text" value=" " name="descL4"></p>    
<p><input type="text" value=" " name="descL5"></p>         </form>

よろしくお願いしますm(__)m


1:[回答] sim [2005/10/25 19:13 ]

onloadでdescEntry()を読み込んで使うのかもしれません。


2:[回答] 神崎 [2005/10/26 00:17 ]

> ページの
> エラーが出てしまいます・・・。
表示されるエラーの内容はなんですか?
答えはそこに書かれています。

(見るからに間違った部分がありますが(他の部分で定義などをしていれば、それであっているかも知れませんが)
エラーメッセージの中に書かれているとおりだと思います)


3:[回答] おうじ [2005/10/26 15:10 ]

>simさん
 BODYで onLoad="descEntry()"してました。
 記述抜けです・・・すいません・・・

>神崎さん
 エラーはステータスバーに出てきます。
 一応動作はしているのですが、気になりまして・・・。

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


4:[質問] おうじ [2005/10/27 11:30 ]

>神崎さん

 >見るからに間違った部分がありますが
  どこでしょうか?? onLoad="descEntry()"以外でしょうか??


5:[質問] おうじ [2005/10/27 11:51 ]

ステータスバーにエラーマークが出たので、
ダブルクリックしたら、

『エラー:終了していない文字列型の定数です』

と出ました。。
どこのことをさしているのかよく分からないんです・・・。


6:[回答] 神崎 [2005/10/27 23:13 ]

> var descLine1;
> (中略)
>  function showDesc(str1, str2, str3, str4, str5) {
>    descLine1.value = str1;
定義ではdescLine1だけですが、代入はdescLine1のvalueに対して行っています。
descLine1.valueの定義がどこか別の場所でされていれば、valueへの代入は可能ですが、
もしdescLine1しか定義していないのであれば、

descLine1=str1;

となると思います。

もしかしてdocument.descL1.valueの間違いとも思ったんですが、
descLine1を別の場所で計算(判断)してからdocument.descL1.valueに代入する、
またはフォームの書き換えは一切行わない、ということも考えられますので、これだけでは判断できません。


あと、
<area shape="polygon" coords="100,100,150,150,200,200">
この指定の仕方ですが、直線です。
マウスを重ねても(通過させても)、JavaScriptが呼び出されるかどうかが怪しいですよ。
(方眼紙か何かに、(100,100) (150,150) (200,200)をそれぞれ直線で囲んでみればわかります。)

> 『エラー:終了していない文字列型の定数です』
おそらくこのエラーは、BBSに投稿された部分以外のコードに関してではないでしょうか。


7:[回答] 神崎 [2005/10/27 23:16 ]

すみません、
No.0
> クリッカブルマップの指定したエリアにカーソルをもっていくと、
> テキストエリアに情報が表示されるというソースを書いたんですが
とのことなので、
> またはフォームの書き換えは一切行わない、ということも考えられますので、
これはないですね。この部分は無視してください。


8:[回答] おうじ [2005/10/28 09:33 ]

神崎さん、ありがとうございます。
> 『エラー:終了していない文字列型の定数です』
 は、ご指摘の通り、BBS投稿以外のところでした。

> この指定の仕方ですが、直線です。
 よく考えてみればそうでした・・・。
 実際はもっと複雑なポリゴンだったので、BBS投稿用に
 適当に書いてしまいました。すいません。


本題のスクリプトですが、確かに
> descLine1.value
の定義はしてませんが、
> descLine1=str1;
では動かないんです。。。

> <input type="text" value=" " name="descL1">
のvalueは無関係でしょうか?
このvalueが書き換えられるんだと勘違いしていました。

根本的に記述の仕方を理解していない自分がいけないんですけど、
もしよろしければ、神崎さんの思われる風にソースを書いていただけるとありがたいです・・・。


9:[質問] おうじ [2005/10/28 09:33 ]

神崎さん、ありがとうございます。
> 『エラー:終了していない文字列型の定数です』
 は、ご指摘の通り、BBS投稿以外のところでした。

> この指定の仕方ですが、直線です。
 よく考えてみればそうでした・・・。
 実際はもっと複雑なポリゴンだったので、BBS投稿用に
 適当に書いてしまいました。すいません。


本題のスクリプトですが、確かに
> descLine1.value
の定義はしてませんが、
> descLine1=str1;
では動かないんです。。。

> <input type="text" value=" " name="descL1">
のvalueは無関係でしょうか?
このvalueが書き換えられるんだと勘違いしていました。


根本的に記述の仕方を理解していない自分がいけないんですけど、
もしよろしければ、神崎さんの思われる風にソースを書いていただけるとありがたいです・・・。


10:[回答] 老衰 [2005/10/28 10:53 ]

とほほのWWW入門からぱくりです。
正確なURLは、画像イメージから類推してください。
そのページもかなり古い情報ですが、間違ったこと
は言っていません(少なくとも君の質問に対しては)。

で、このページにあるクリッカブルマップのサンプル
にちょびっとだけ手を入れたものが以下のものです。
コピペして適当なファイルに保存すれば動きます。
画像は直リンクしているので不要です。

で、もしかしたら、君の環境でのみ再現するエラーかも
しれないので、エラーが再現する極力小さくしたソース
を再提出してもらえませんか?
テキストボックスも1個で十分です。5個はそれなりに
理由があるのでしょうけれど。

「終了してない文字列定数です」このエラーは、全角スペース
がスクリプト中に紛れ込んでいる場合にも出ると思います。

Mifes や秀丸?(使ったことないから知らん)等全角スペース
を視覚化可能なエディタで見てみるのもいいかもしれませんね。

<html>
<head><title>ClickMapSample</title>
<script>
function show(o) {
    document.getElementById("text").value = o.alt;
}
function hide() {
    document.getElementById("text").value = "";
}
</script>
</head>
<body>
<input type=text size=20 id="text"><br>
<img src="http://www.tohoho-web.com/html/image/map.gif" alt="画像"
 usemap="#map_TEST"
 border=0 width=243 height=68>
<map name="map_TEST">
<area
 shape=rect
 coords="11,16,63,54"
 alt="HTML"
 onmouseover="show(this)"
 onmouseout="hide()"
 href="../html/index.htm">
<area
 shape=poly
 coords="73,50,159,50,159,24,73,9"
 alt="JavaScript"
 onmouseover="show(this)"
 onmouseout="hide()"
 href="../js/index.htm">
<area
 shape=circle
 coords="197,32,28"
 alt="CGI"
 onmouseover="show(this)"
 onmouseout="hide()"
 href="../wwwcgi.htm">
<area
 shape=default
 alt="Other"
 onmouseover="show(this)"
 onmouseout="hide()"
 href="../www.htm">
</map>
</body>
</html>


11:[回答] 神崎 [2005/10/28 10:56 ]

検証用に作ったのは以下の通りですが、
マウスオーバーでテキストを表示、マウスアウトでテキストを消す、というだけでは、descEntry(){}やdescLine1〜5は使っていません。


<html>
<HEAD>
<script type="text/javascript">
<!--
 var descLine1;
 var descLine2;
 var descLine3;
 var descLine4;
 var descLine5;
 function showDesc(str1, str2, str3, str4, str5) {
   document.linkDesc.descL1.value = str1;
   document.linkDesc.descL2.value = str2;
   document.linkDesc.descL3.value = str3;
   document.linkDesc.descL4.value = str4;
   document.linkDesc.descL5.value = str5;
 }
 function descEntry() {
   descLine1 = document.linkDesc.descL1;
   descLine2 = document.linkDesc.descL2;
   descLine3 = document.linkDesc.descL3;
   descLine4 = document.linkDesc.descL4;
   descLine5 = document.linkDesc.descL5;
  }
//--></script>
</HEAD>


<BODY>
<img src="worldmap.png" usemap="#map1" onload="descEntry()"></div>
<map name="map1">

<area shape="polygon" coords="100,100,100,200,200,200" onMouseOver="showDesc('情報1','情報2','情報3','情報4','情報5')" onmouseout="showDesc(' ',' ',' ',' ',' ')">

<form action="." name="linkDesc">
<p><input type="text" value=" " name="descL1"></p>
<p><input type="text" value=" " name="descL2"></p>
<p><input type="text" value=" " name="descL3"></p>
<p><input type="text" value=" " name="descL4"></p>
<p><input type="text" value=" " name="descL5"></p>
</form>

</body>
</html>


12:[回答] おうじ [2005/10/28 11:40 ]

神崎さん、本当にありがとうございます。
おかげ様でうまく作動することが出来ました。

また分からないことがあったときはよろしくお願いします。


13:[質問] おうじ [2005/10/28 11:43 ]

老衰さん、ありがとうございます。

エラー無く作動しました!!
感動しました!!!!

ですが、テキストは5つ欲しいんです・・・。
altだと、一度に5個の情報を書き込むことは出来ないのですが・・・。

このソースは1個のテキストボックス用ですよね??

5個のテキストボックスはテーブルに組み込みたいのです。

どうぞよろしくお願いします。


14:[回答] 老衰 [2005/10/28 11:51 ]

ま、やるかどうかは別にして、
alt="zzz,xxx,eee,rrr,ttt"

function show(o) {
 var  arr = o.alt.split(",");
 for (var i=1;i <= 5;i++) {
   document.getElementById("text"+i).value = arr[i-1];
 }
}


15:[回答] AC1号 [2005/10/29 00:16 ]

>>0 が一番まともなソースで、スレッドが進むにつれて酷いソースになっている。

解決への道から遠ざかっていくのは見るに忍びないので、先に解答を示しておきます。
>>0のソースのbody開始タグにonload="descEntry()"を付け加えれば意図通り動くはず。これでエラーが発生するのであれば、>>6の「あと、」より後ろの行の内容*のみ*を確認すること(>>6の前半は忘れること!)。

>>6,11
>>0のdeskLine1はinput要素自体のオブジェクトを示すものなので、>>0が正解です。

また、>>11でimg要素にonload属性を付けていますが、img要素のonload属性はMSIEの独自拡張です。それ以前にこの用途で使うのは無意味です。document.linkDesc.descL1オブジェクトが確実に存在するといえるのは、HTML文書がすべて読み込まれた後であり、画像が読み込まれた後ではありません。

>>10,14
これはalt(alternate)の意味を知っての上での投稿ですか?


16:[回答] 神崎 [2005/10/29 03:32 ]

> onload="descEntry()"
>>0のdeskLine1はinput要素自体のオブジェクトを示すものなので、>>0が正解です。

なるほど、そういうことですか。
こういう書き方をしないので。失礼しました。


17:[回答] 神崎 [2005/10/29 03:35 ]

連続失礼します。

> <img src="worldmap.png" usemap="#map1" onload="descEntry()">
あちゃ、<body onload="descEntry()">のつけたつもりだったんですが、、、
どおりで動かなかったわけですね。
(検証ブラウザがMac Netscapeだったので)


18:[質問] おうじ [2005/10/31 15:09 ]

AC1号さん、ありがとうございます!

>6の「あと、」より後ろの行の内容
 については>>8に書かせてもらったとおり、このBBSに載せるために
 適当に書いてしまいました・・・。

最初ので問題ないんですね。ありがとうございます。。。

ちなみに、老衰さんから教えていただいた、alt(alternate)は何か
問題あるのでしょうか?


19:[回答] AC1号 [2005/10/31 20:42 ]

>>18
alt属性は、画像の表示できないブラウザ(テキストブラウザや音声ブラウザ、IEでも画像表示をoffにした場合)で代わりに(alternate)表示するテキストとして使われます。それを無視してalt属性に意味不明な値を入れると、テキストブラウザの利用者はその意味不明な文字を見ることになります。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]