リンクレイヤー表示の切り替えについて

このQ&Aのポイント
  • リンクレイヤーを切り替える方法について解説します
  • リンクレイヤー表示の切り替えをスムーズにする方法を紹介します
  • リンクレイヤーの表示を簡単に切り替える方法をご教授ください
回答を見る
  • ベストアンサー

リンクレイヤー表示の切り替えについて

 もともとは1つのリンクメニューの表示と非表示を切り替える書籍のサンプルを2つのリンクメニューを同じ場所に切り替え表示させるよう修正を行ってみました。  ですが、リンク(1)を表示させてからリンク(2)をさせるにはリンク(1)を再度クリックし、一度非表示にしないとリンク(2)が表示されません。  リンク(1)の表示から直接リンク(2)の表示に切り替えるようにしたいのですがどなたかご教授願えませんでしょうか。 <html> <head> <SCRIPT Language="JavaScript"> <!-- types = "hidden"; function pullDownMenu(tagName,x,y) { if (types == 'hidden') types = 'visible'; else types = 'hidden'; if (document.layers) document.layers[tagName].visibility = types; if (document.all) document.all(tagName).style.visibility = types; } // --> </SCRIPT> </head> <body> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag1"> <TT> <A HREF="http://a.co.jp">サイトA</A><BR> <A HREF="http://b.co.jp">サイトB</A> </TT> </DIV> <DIV STYLE="position: absolute; left: 168; top: 15; visibility: hidden; width: 182; height: 56" ID="tag2"> <TT> <A HREF="http://c.co.jp">サイトC</A><BR> <A HREF="http://d.co.jp">サイトD</A> </TT> </DIV> <table> <tr> <td> <A HREF="sample.htm" onClick="pullDownMenu('tag1');return false">リンク(1)</A> <A HREF="sample.htm" onClick="pullDownMenu('tag2');return false">リンク(2)</A> </td> </tr> </table> </body> </html>

noname#257189
noname#257189

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

表示・非表示の切り替えをtypesの1つでやっているために、希望通りの動作になりません。 自分自身の値によって切り替えるように変更します。 その際、今表示されているのが、自分でない場合、非表示にします。 <SCRIPT Language="JavaScript"> <!-- selectTag = ""; function pullDownMenu(tagName,x,y) { if(selectTag != "" && selectTag != tagName){ if(document.getElementById(selectTag).style.visibility == 'visible'){ document.getElementById(selectTag).style.visibility = 'hidden'; } } selectTag = tagName; //前回選んだタグ名の保存 if (document.layers) obj=document.layers[tagName]; if (document.all) obj =document.all(tagName); obj.style.visibility = (obj.style.visibility == "hidden") ? "visible" : "hidden"; } // --> </SCRIPT>

noname#257189
質問者

補足

回答誠に有難う御座います。 早速試させて頂きましたが 回答にある<SCRIPT>~</SCRIPT>のみ変更を行えばよろしかったでしょうか? <SCRIPT>~</SCRIPT>のみ修正し、 実行しましたところ7行目の if(document.getElementById(selectTag).style.visibility == 'visible'){ の13文字目で')'がありませんとエラーになってしまいます。 他に修正すべき箇所等ありましたらお教え下さい。 ご無理を言って済みませんが宜しくお願い致します。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

#2> 補足のソースで >if(selectTag! = "" && selectTag!=tagName){ の部分 ! = になっていますが != にして下さい。 間に空白を入れると意味が変わってしまいます !と=の間に空白を入れないように変更して下さい。

noname#257189
質問者

お礼

空白で意味が変わるとは知らず、 お手数おかけして申し訳ありませんでした。 おかげさまで希望通の動作となりました。 本当にありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

>13文字目で')'がありませんとエラーになってしまいます。 変ですね。 写し間違いはないでしょうか? <SCRIPT>~</SCRIPT> を置き換えればいいと思うのですが。 getElementByIdが使えないのかも知れないので なんだったら 以下を試して下さい <SCRIPT Language="JavaScript"> <!-- selectTag = ""; function pullDownMenu(tagName,x,y) { if(selectTag != "" && selectTag != tagName){ if (document.layers) obj=document.layers[selectTag]; if (document.all) obj =document.all(selectTag); obj.style.visibility = "hidden"; } selectTag = tagName; //前回選んだタグ名の保存 if (document.layers) obj=document.layers[tagName]; if (document.all) obj =document.all(tagName); obj.style.visibility = (obj.style.visibility == "hidden") ? "visible" : "hidden"; } // --> </SCRIPT>

noname#257189
質問者

補足

返事が遅れてすみせん。 やはり同様のエラーとなってしまいます。 下記にエラーとなるソースを記載させて頂きました。 よろしければ一度見て頂けないでしょうか。 ご面倒おかけしますがどうぞよろしくお願い致します。 <SCRIPT Language="JavaScript"> <!-- selectTag = ""; function pullDownMenu(tagName,x,y) { if(selectTag! = "" && selectTag!=tagName){ if(document.layers) obj =document.layers[selectTag]; if(document.all) obj =document.all(selectTag); obj.style.visibility ="hidden"; } selectTag = tagName; if(document.layers) obj =document.layers[tagName]; if(document.all) obj =document.all(tagName); obj.style.visibility =(obj.style.visibility == "hidden") ? "visible":"hidden"; } // --> </SCRIPT>

関連するQ&A

  • ネスケ6以上でも動作させたいのですが・・・・・

    ネスケ6からlayerがサポートされていないということなのですが、 以下をどう書き直せば、ネスケ6以上でも動作するようになるのでしょうか? 単純にgetElementByIdに置き換えても動かないですよね・・・・力不足(T_T) どなたかお助けお願いいたします。 <STYLE TYPE="text/css"> <!-- #menu1 {position:absolute; top:160; left:80; width:92; font-size:10pt; color:#000000; background-color:#CFCFD8; visibility:visible} #tag1 {position:absolute; top:174; left:80; width:92; font-size:10pt; color:#000000; background-color:#CFCFD8; visibility:hidden} //--> </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- types="hidden"; function pullDownMenu(tagName,x,y) {  if(types == 'hidden')types='visible';else types='hidden';  if(document.layers)document.layers[tagName].visibility=types;  if(document.all)document.all(tagName).style.visibility=types; } //--> </SCRIPT> </HEAD> <BODY> <P><IMG src="image.gif" border="0" width="285" height="39"></P> <DIV ID="menu1"> <A HREF="function voi(){};voi()" onClick="pullDownMenu('tag1');return false">わんにゃん</A> </DIV> <DIV ID="tag1"> <A href="dog.html"> わんこ </A><BR> <A HREF="cat.htm"> にゃんこ </A><BR> <A HREF="kitten.htm"> こにゃんこ </A><BR> </DIV> </BODY>

  • フレームで仕切っているHTMLファイルでeventオブジェクトが思うように使えない

    上下をフレームで仕切っているHTMLファイルの下側で、JavaScriptのeventオブジェクトを使用して、いくつかの場所でマウスポインタが重なると、文字が出てくる仕組みを作りました。一見うまくいったように思えたのですが、画面を下にスクロールさせた時に、そのスクロールをさせただけ上にずれて表示されます。これって解消方法はあるのでしょうか? 以下、HTMLファイルより一部抜粋(ファイル名:program.html) ++++headタグ部分++++ <style type="text/css"> <!-- iv { font-size: 11pt; font-weight: bold; color: #FF0000; position: absolute; visibility: hidden; clip: rect( )} --> </style> <script Language="JavaScript"> <!-- function chipHelp(tagName,types,x,y) { if (document.layers) { document.layers[tagName].x =x; document.layers[tagName].y =y; document.layers[tagName].visibility = types; } if (document.all) { document.all(tagName).style.pixelLeft =x; document.all(tagName).style.pixelTop =y; document.all(tagName).style.visibility =types; } } // --> </script> </head> ++++以下bodyタグ部分++++ <body> ・ ・ <a href="program.html" onMouseover="chipHelp('0600sat','visible',event.x,event.y)" onMouseout="chipHelp('0600sat','hidden',0,0)">釣りDAISUKI</a> ・ ・ <div id="0600sat"> 土・6時15分→土・6時00分</div> </body> </html> ちなみにこのスクリプトは、『JavaScript+CGI&Perl 決定版!ホームページサンプルスクリプト大全集』のJavaScriptサンプル集_応用編25「マウスが重なったとき説明文を表示」を参考にしています。

  • マウスオンで説明文をページの真ん中に表示させたい!

    よろしくお願いします。 http://www4.ocn.ne.jp/~tomotan/tagpractice.html (↑)このサイトで <HTML> <HEAD> <SCRIPT><!-- function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></SCRIPT> <STYLE><!-- .myStyle { position: absolute; visibility:hidden; top:150; left:300; } //--></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> Hello!! </DIV> </BODY> </HTML> を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。 そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。 で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。 お願いしますm(__)m

  • NN7.0でレイヤーの表示・非表示

    レイヤーの表示・非表示のスクリプトなんですが、 function OpenLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="visible"; } //IEの場合 else { content_menu.style.visibility="visible"; } } function CloseLayer() { //NNの場合 if(document.layers) { document.content_menu.visibility="hidden"; } //IEの場合 else { content_menu.style.visibility="hidden"; } } に書きました。 IE6.0では動作しますがNN7.0では何も起こりません。 どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。

  • カテゴリをクリックして、リンク先一覧を表示させたい

    テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、 「リンク1」をクリック→別テーブルにちゃんとリンク先一覧が表示される。 次に「リンク2」をクリックすると「リンク1」のリンク先一覧の下に「リンク2」のリンク先一覧も表示されてしまう。 しかも2回クリックしないと表示されません(泣 「リンク2」をクリックしたら「リンク1」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.visibility = "hidden"; else ID01.style.visibility = "visible"; flag = !flag; } function pullDown02() { if(flag) ID02.style.visibility = "hidden"; else ID02.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><A href="javaScript:pullDown01()">リンク1</a><BR> <BR> <A href="javaScript:pullDown02()">リンク2</a><BR> </TD> <TD style="width:380px;height:190px"> <DIV id="ID01" style="visibility: hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> </DIV> <DIV id="ID02" style="visibility: hidden;"> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> </BODY>

  • 表示/非表示の切り替え

    AAA、BBB、CCCの3つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか? ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================

  • リンクについて質問です。

    div要素で左側がメニュー・右側がコンテンツという配置にしました。 右側のコンテンツは、背後に3つの文章をvisibility="hidden"で隠しています。  メニュー側からだと上手くリンク先に飛ぶのですが、コンテンツ側からだと全く反応しません。 ちなみにリンク先の文章を表示する場所は、右側の部分です。 メニュー側の方で一度全てリンクをクリックしてからだとなぜかコンテンツ側でもリンク先に飛ぶことが出来ます。何故でしょうか?? function change(con) { document.all("main").style.visibility="hidden"; document.all("lesson").style.visibility="hidden"; document.all("lesson2").style.visibility="hidden"; document.all("lesson3").style.visibility="hidden"; document.all(con).style.visibility="visible"; }

  • onMouseOverの適応範囲

    困ってしまい質問させていただきます。 <div>  <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">  <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか? ブラウザはIEを利用しています。 どうか宜しくお願いします。

  • Netscape4でスタイルシートを設定すると、スクリプトが動作しません。

    お世話になっています。 現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。 しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。(「#この部分が~」のところです) 原因が分かれば、教えていただきたいと思います。 ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>  <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題? <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>

  • 初期画像にレイヤーが出てしまう

    HPにレイヤー設定をしたところ、画像を開けるとすぐレイヤーが出てしまいます。しかし、その画像でマウスを重ねたり外したりすれば、問題なく作動します。その後、HPを開けると、また最初だけレイヤーが表示されてしまいます。どのようにしたら、最初の画面で表示されないようになるでしょうか?よろしくお願い致します。 次のように設定しています。 <script language="JavaScript"> <!--//レイヤー表示 function Lay_View(name,sw) { if (document.all) { //IE用 document.all[name].style.visibility=sw; } else if (document.layers) { //NC用 document.layers[name].visibility=sw; } } //--> </script> <div id="ABC" style="position:absolute; width:350px; height:30px; z-index:1; left: 80px; top: 210px">あいうえお</div> <a href="index1.html"onMouseOver="Lay_View('ABC','visible');"onMouseOut="Lay_View('ABC','hidden');">AIUEO</a> これだけです。何か足りないでしょうか?