WEB相談室

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

タイトル:クリッカブルマップからテキストボックス入力

0:[投稿] ・・・。 [2005/03/11 11:21 ][環境:IE6,WIN2000 わからない]

昨日教えていただいたのですが、
クリッカブルマップからマウスオーバーでテキストボックスへ
入力する方法として、

<head>
       <meta http-equiv="content-type" content="text/html; charset=shift_jis">
       <meta http-equiv="content-script-type" content="text/javascript">
       <script type="text/javascript"><!--
           var descLine;
           function showDesc(str) {
               descLine.value = str;
           }
       //--></script>
       <title>テスト</title>
   </head>
   <body onLoad="descLine = document.linkDesc.descLine">
       <div>
           <h1><img src="./title.png" usemap="#naviBar" alt="タイトル"></h1>
           <map name="naviBar">
               <area href="./page1.html" coords="0,0,100,100" onMouseOver="showDesc('page1')" alt="ページ1">
               <area href="./page2.html" coords="101,0,200,100" onMouseOver="showDesc('page2')" alt="ページ2">
               <area href="./page3.html" coords="201,0,300,100" onMouseOver="showDesc('page3')" alt="ページ3">
           </map>
       </div>
       <form action="." name="linkDesc">
           <p><input type="text" size="30" value="ここにリンク先が表示される" name="descLine"></p>
       </form>
   </body>
という記述があるのですが、
この場合、いつのテキストボックスに1文章の入力となります。
これを、2つ以上のテキストボックスに入力する方法が
ありますでしょうか?
どなたか教えてください。
よろしくお願いします。


1:[回答] を [2005/03/11 11:37 ]

<script type="text/javascript"><!--
  var descLine1;
  var descLine2;
    …    //入力するテキストボックスの数だけ用意
  function showDesc(str) {
    descLine1.value = str;
    descLine2.value = str;
      …
  }
  function descEntry() {
    descLine1 = document.linkDesc.descL1;
    descLine2 = document.linkDesc.descL2;
      …
  }
//--></script>
  …
<body onLoad="descEntry()">

ってかんじですか?
この場合、すべてのテキストボックスに同じ文字が入ってしまいます。
違う文字を入れたいなら、showDesc(str)を適当にいじってください。


2:[質問] ・・・。 [2005/03/11 12:04 ]

<head>
<script type="text/javascript"><!--
  var descLine1;
  var descLine2;
  function showDesc(str) {
    descLine1.value = str;
    descLine2.value = str;
  }
  function descEntry() {
    descLine1 = document.linkDesc.descL1;
    descLine2 = document.linkDesc.descL2;
  }
//--></script>
  </head>
  <body onLoad="descEntry()">
      <div>
          <h1><img src="./title.png" usemap="#naviBar" alt="タイトル"></h1>
          <map name="naviBar">
              <area href="./page1.html" coords="0,0,100,100" onMouseOver="showDesc('page1')" alt="ページ1">
              <area href="./page2.html" coords="101,0,200,100" onMouseOver="showDesc('page2')" alt="ページ2">
          </map>
      </div>
      <form action="." name="linkDesc">
          <p><input type="text" size="30" value="ここにリンク先が表示される" name="descLine1"></p>
          <p><input type="text" size="30" value="ここにリンク先が表示される" name="descLine1"></p>
      </form>
  </body>

としましたが、うまく表示されませんでした・・・。
何かおかしいでしょうか?
あと、showDesc(str)を適当にいじるのが分からないので、
良かったら教えていただけませんか?


3:[回答] を [2005/03/11 13:17 ]

すみません、私の説明不足でした。
リンクが表示されるテキストボックスですが、
javascriptで確保している変数名と、フォームの名称が同じになっていたので、
<input type="text" size="30" value="ここにリンク先が表示される" name="descL1">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL2">
と勝手に頭の中で変換していたようです。
フォームをこのようにしてみてください。

また、showDesc(str)で、出力される文字列が同じになる件ですが、
フォームにはshowDesc(str)の引数である、文字列strが表示されることになります。よって、テキストボックス2つとも文字列strが表示されます。
それで、適当に変更の例ですが、
例)テキストボックスそれぞれに引数で文字列を渡す

  function showDesc(str1, str2) {
    descLine1.value = str1;
    descLine2.value = str2;
  }

<area href="./page1.html" coords="0,0,100,100" onMouseOver="showDesc('page1', 'ページ1')" alt="ページ1">

こんなかんじです。


4:[完了] ・・・。 [2005/03/11 14:08 ]

解決しました。
ご回答ありがとうございました。


5:[完了] ・・・。 [2005/03/11 14:59 ]

テキストボックスを5つ作ろうと思い、
<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;
    descLine2.value = str3;
    descLine2.value = str4;
    descLine2.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>

<body onLoad="descEntry()">

<area href="./page1.html" coords="0,0,100,100" onMouseOver="showDesc('page1', 'ページ1', '頁@', '1ページ', '−@−')" alt="ページ1">

<form action="." name="linkDesc">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL1">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL2">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL3">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL4">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL5">
と、単純に個数を増やしたのですが、エラーが出てしまい、
2個目までしか表示されませんでした。
上限が決まっているんでしょうか?
記述にミスがあるのでしょうか?
教えていただけませんか?
よろしくお願いします。


6:[質問] ・・・。 [2005/03/11 14:59 ]

テキストボックスを5つ作ろうと思い、
<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;
    descLine2.value = str3;
    descLine2.value = str4;
    descLine2.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>

<body onLoad="descEntry()">

<area href="./page1.html" coords="0,0,100,100" onMouseOver="showDesc('page1', 'ページ1', '頁@', '1ページ', '−@−')" alt="ページ1">

<form action="." name="linkDesc">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL1">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL2">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL3">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL4">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL5">
と、単純に個数を増やしたのですが、エラーが出てしまい、
2個目までしか表示されませんでした。
上限が決まっているんでしょうか?
記述にミスがあるのでしょうか?
教えていただけませんか?
よろしくお願いします。


7:[回答] を [2005/03/11 16:21 ]

    descLine1.value = str1;
    descLine2.value = str2;
    descLine2.value = str3;
    descLine2.value = str4;
    descLine2.value = str5;
となっています。
    descLine1.value = str1;
    descLine2.value = str2;
    descLine3.value = str3;
    descLine4.value = str4;
    descLine5.value = str5;
と直してみてください。



8:[完了] ・・・。 [2005/03/11 16:27 ]

うっかりしていました。
ご指摘ありがとうございました。


9:[回答] を [2005/03/11 16:40 ]

入力フォームが増えるなら、ループで処理するほうがすっきりしますよ。

<script type="text/javascript"><!--
  var descLine = new Array();

  function showDesc() {
   str = new Array('page1', 'ページ1', '頁@', '1ページ', '−@−');
    for (i = 1; i <= 5; i++) {
      descLine[i] = str[i];
    }
  }
  function descEntry() {
    for (i = 1; i <= 5; i++) {
      descLine[i] = document.all("descL"+i).value;
    }
  }
//--></script>

<body onLoad="descEntry()">

<area href="./page1.html" coords="0,0,100,100" onMouseOver="showDesc()" alt="ページ1">

<form action="." name="linkDesc">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL1">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL2">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL3">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL4">
<input type="text" size="30" value="ここにリンク先が表示される" name="descL5">

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World