WEB相談室

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

タイトル:テキストと画像の同期変更

ひでや[MAIL][URL][WriteDate : Sat Nov 11 15:26:09 2000]

前回ご回答頂いた方々、ありがとうございました。
恥ずかしながら、2度目の質問をさせていただきたいのですが・・・・

具体的には、次のurlです。(ただしIE4.0以降のみ対応)

http://www.geocities.co.jp/Bookend-Kenji/8370/dr01.htm#Q

このページで、セレクトメニューでその下のメッセージを
切り換えることはできるのですが、
その下の地図の上の複数の青い押しボタンの画像のうち
いくつかを個別に表示させたり非表示にさせたりしたいのです。

どうすればよいのでしょうか・・・

ひでや[MAIL][URL][WriteDate :Sat Nov 11 15:45:07 2000]

ソースは次の感じです。

<HEAD>

msg = new Array();  //表示する文字列。タグ可。
msg[0] = "<table bgcolor=#000000 cellspacing=0 cellpadding=0 border=0><tr><td>"
         +"ランドやモイレイン達が戦禍を避けるために潜んだ場所はどこ?"
         +"</td></tr></table>";  
msg[1] = "<table bgcolor=#000000 cellspacing=0 cellpadding=0 border=0><tr><td>" 
         +"エグウェーン達が瀕死のマットを連れて向かった場所はどこ?"
         +"</td></tr></table>";
function showLayer(i){  //(i)は上の配列に対応
  if(isNN4){  //NN4のとき
    document.layers['layer1'].document.write(msg[i]); 
    document.layers['layer1'].document.close();  
  }
  if(isIE4){  //IE4のとき
    layer1.innerHTML = msg[i];
  }
}
//-->
</script>

</HEAD>

<body bgcolor="#000000>

<p align="center">
次のセレクトメニューで登場人物を選択し、<BR>
セレクトメニューの下に表示される問題にお答え下さい。<BR>
<form>
<select onChange="location=this.options[this.selectedIndex].value">
<option value="#Q">*****セレクトメニュー*****
<option value="javascript:showLayer(0)">ランド+モイレイン達の軌跡
<option value="javascript:showLayer(1)">エグウェーン+マット達の軌跡

</select>
</form>

<p>
<span id="layer1" style="position:absolute;">
</span>
<br><br>
</p>

以下、複数の画像のz-index指定の重ね合わせ・・・・です。

http://www.geocities.co.jp/Bookend-Kenji/8370/dr01.htm#Q

ちゃいぱ[MAIL][URL][WriteDate :Sat Nov 11 23:38:16 2000]

DHTMLで確か、画像の表示オン・オフがあったと思います。
いま、家なので、資料がないので、月曜日以降にチャレンジして見たいと思います!

ひでや[MAIL][URL][WriteDate :Sun Nov 12 00:01:51 2000]

ちゃいぱ様、ありがとうございます。
DHTMLでは、「hidden」と「visible」を入れ替えるとできます。
具体的には次の通りです。↓

<HTML>
<HEAD><TITLE>オブジェクトの表示/非表示を切りかえたい</TITLE></HEAD>
<BODY bgcolor="#ffffff">
<SPAN id="menu1" style="position:absolute;top:10;left:10;" 
onmouseover="showMsg()" onmouseout="hideMsg()">
この上を通過すると</SPAN>
<SPAN id="text1" style="position:absolute; top:30; left:50; 
visibility:hidden;">
このように文字列が現れます。<BR>離れると消えます。</SPAN>
<SCRIPT langage="JavaScript">
function showMsg(){
text1.style.visibility="visible";}
function hideMsg(){
text1.style.visibility="hidden";}
</SCRIPT>
</HTML>

僕の輪からないのはどちらかというともっと基本的な部分でして(汗)、
セレクトメニューの選択結果を画像の変更等のイベントに
繋げるやり方が解りません(涙)
どなたか教えて下さい!

ひでや[MAIL][URL][WriteDate :Sun Nov 12 01:30:18 2000]

ちゃいぱ様、ご指導ありがとうございました。
Mugi様の方からご回答を頂くことができました。
いやぁ、皆さま、凄い方ばかりですね!感動しました。
ではでは (^o^)/~~~

Piro[MAIL][URL][WriteDate :Sun Nov 12 01:37:04 2000]

<form name="SwitchForm">
<select name="MsgLst" onchange="SwitchMsg()">
 <option value="value1">〜</option>

function SwitchMsg() {
 Num = document.SwitchForm.MsgLst.selectedIndex;
 Sel = document.SwitchForm.MsgLst.options[Num].value;
 if (Sel == 'value1') {
  text1.style.visibility='visible';
  text2.style.visibility='hide';
 } else if (Sel == 'value2') {
  text1.style.visibility='hide';
  text2.style.visibility='visible';
 }
}

こんな感じでできると思いますが。


Piro[MAIL][URL][WriteDate :Sun Nov 12 01:40:06 2000]

あ。もう完了してましたか。蛇足すみません。

ちゃいぱ[MAIL][URL][WriteDate :Sun Nov 12 15:46:17 2000]

Piroさんへ
>蛇足すみません。 
いえいえ、また教えて下さい!

ひでや[MAIL][URL][WriteDate :Sun Nov 12 23:27:39 2000]

Piro様、ちゃいぱ様、どうもありがとうございました!
回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]