WEB相談室

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

タイトル:線が伸びてその県の説明をする

あつ [MAIL] [WriteDate : Tue May 22 19:04:54 2001]

質問です。

例えばクリッカブルマップを使って、日本地図で、大阪にポインタを
持ってきたら、大阪から50pxくらいの線が伸びて(線が伸びていく様子をみたい、
という訳ではありません。)、その先に四角で囲って大阪についての説明がされる、というような、スクリプトを作成したいのですが、どうしたらいいのか、考えていたのですが、わかりません。教えてください。

「その県の説明」は、それぞれ出現する場所が違えて(スタイルシートのtop,leftで指定)、ポインタが他の県に移ると(onMouseout)その県の説目は消える(visibility='hidden')という感じで作りたいのですが・・・。
よろしくお願いします。


ちゃいぱ [WriteDate : Wed May 23 09:47:07 2001]

まず、img要素、map要素、area要素でマークアップし、
onMouse系のイベントをarea要素の属性に仕掛け、ネスケならレイヤー要素、IEならDIV要素を説明文を出力する。

DHTMLとイメージマップを勉強してみてください。


yuu [MAIL] [URL] [WriteDate : Wed May 23 11:31:16 2001]

Flashを使うとか。:-p


あつ [MAIL] [WriteDate : Wed May 23 15:15:54 2001]

一応作成したのですが、ネスケの6では動作がうまくいきません。
デフォルトでqqqqq.visibility ='hidden';にしているのに、
でてしまっています。以下ソースです。

******************************************************
<html>
<head>
<STYLE type="text/css"><!--
#aaaaa {position:absolute;font-size:12px;color:#000000; top:20px; left:130px;}
//--></STYLE>
</head>
<body>

<map name="wakuwaku03_50Map">
<area shape="polygon" coords="18,80,148,94,138,15,75,12" href="#" onMouseover="hhh('visible');" onMouseout="hhh('hidden');">
</map>
<img src="zzz.gif" width="569" height="340" alt="イラスト" border="0" usemap="#wakuwaku03_50Map">

<DIV ID='aaaaa'>
大阪<br>たこ焼き、食いだおれ・・・
</DIV>

<SCRIPT LANGUAGE="JavaScript"><!--


    var qqqqq;
    if(navigator.appName=="Netscape") {
        var UA = navigator.userAgent;
        if (UA.indexOf('Netscape6') !=-1){
            qqqqq = document.getElementsById("aaaaa").style;
        } else {
            qqqqq = document.layers.aaaaa;
        }
    } else {
        qqqqq = document.all.aaaaa.style;
    }
    qqqqq.visibility = 'hidden';
function hhh(hiki){
    qqqqq.visibility = hiki;
}

//--></SCRIPT>

</body>
</html>
*********************************************************
if (UA.indexOf('Netscape6') !=-1){
qqqqq = document.getElementsById("aaaaa").style;
}
のqqqqqの部分が悪いと思うのですが、どうなおしたらいいのでしょうか?


ween [WriteDate : Wed May 23 15:39:26 2001]

getElementsById("aaaaa") じゃなくて
getElementById("aaaaa") です。


あつ [WriteDate : Wed May 23 16:57:27 2001]

weemさんありがとうございました。
単純なみすでした・・・・。
ひとまず、思い通りにうごいております!!

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World