- ベストアンサー
ネットスケープ６以上で表示できるようにしたい
godakazの回答
とりあえず、手直ししただけで動くよ。 <html> <head> <STYLE TYPE="text/css"> <!-- #links0 { position:absolute; left:430;top:75; font-size:10pt; z-index:2 ;} .lays { position:absolute; left:50;top:350; width:250;height:200; clip:rect(0,250,200,0); font-size:10pt; line-height:150%; text-align:center; z-index:0 ;} //--> </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function setBGCOLOR(layName,color){ if(document.getElementById){window.document.getElementById(layName).style.backgroundColor=color;} else{document.layers[layName].bgColor=color;} } function zindexLAYER(layName,zindex){ zindex = zindex - 0; if(document.getElementById){window.document.getElementById(layName).style.zIndex=zindex;} else{document.layers[layName].zIndex=zindex;} } function c02ini(){ setBGCOLOR('msg1','#d8bfd8'); setBGCOLOR('msg2','#f5deb3'); } function swtOnZ(layName){ zindexLAYER('msg1',0); zindexLAYER('msg2',0); zindexLAYER(layName,2); } //--> </SCRIPT> </head> <BODY onLoad="c02ini();"> <DIV ID="links0"> <A href="Page1.html" onmouseover="swtOnZ('msg1')"><IMG class="vmid" src="top1.gif" width="77" height="78" border="0">Page1</A><BR> <A href="Page2.html" onmouseover="swtOnZ('msg2')"><IMG class="vmid" src="top2.gif" width="77" height="78" border="0">Page2</A><BR> </DIV> <DIV CLASS="lays" ID="msg1" style="z-index:0; background-color:#d8bfd8;"> <BR>Page1説明 </DIV> <DIV CLASS="lays" ID="msg2" style="z-index:1: background-color:#f5deb3;"> <BR>Page2説明 </DIV> </body> </html>
関連するQ&A
- MacIEやＯｐｅｒａでも動作させたい
MacIEやＯｐｅｒａでも動作させたいのですが、わからないのです。宜しくお願いします。 <HEAD> <STYLE TYPE=\"text/css\"> <!-- #links0 { position:absolute; left:430;top:35; z-index:2 ;} .lays { position:absolute; left:70;top:380; width:200;height:160; clip:rect(0,200,160,0); line-height:150%; text-align:center; z-index:0 ;} //--> </STYLE> <SCRIPT LANGUAGE=\"JavaScript\"> <!-- function setBGCOLOR(layName,color){ if(document.getElementById){window.document.getElementById(layName).style.backgroundColor=color;} else{document.layers[layName].bgColor=color;} } function zindexLAYER(layName,zindex){ zindex = zindex - 0; if(document.getElementById){window.document.getElementById(layName).style.zIndex=zindex;} else{document.layers[layName].zIndex=zindex;} } function c02ini(){ setBGCOLOR(\'msg1\',\'#decdce\') setBGCOLOR(\'msg2\',\'#decdce\') } function swtOnZ(layName){ zindexLAYER(\'msg1\',0);zindexLAYER(\'msg2\',0) zindexLAYER(layName,2) } //--> </SCRIPT> </HEAD> <BODY onload=\"c02ini()\" text=\"#522c29\"> <DIV ID=\"links0\"> <A href=\"1.html\" onmouseover=\"swtOnZ (\'msg1\')\">１</A><BR> <P><A href=\"2.html\" onmouseover=\"swtOnZ (\'msg2\')\">２</A><BR> </DIV> <DIV CLASS=\"lays\" ID=\"msg1\"> <FONT>１</FONT> </DIV> <DIV CLASS=\"lays\" ID=\"msg2\"> <FONT>２</FONT> </DIV> </BODY>
- 締切済み
- JavaScript
- popupウィンドウでborderがcollapseなテーブル利用の問題
popupウィンドウにテーブルを使用していて、 border-collapse: collapse のボーダーがある場合に、 初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。 そこで非表示にするためのjavascript をonloadで動かしているのですが、 データ量の大きいページだと、表示された後に消えるのが 見えてしまい不細工です。 最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script> <!-- function PopupOn(Msg){ if(document.all){ MyMsg = document.all(Msg).style; MyMsg.visibility = "visible"; } else if(document.layers){ MyMsg = document.layers[Msg]; MyMsg.visibility = "show"; } else if(document.getElementById){ MyMsg = document.getElementById(Msg).style; MyMsg.visibility = "visible"; } } function PopupOff(Msg){ if(document.all) document.all(Msg).style.visibility = "hidden"; else if(document.layers) document.layers[Msg].visibility = "hide"; else if(document.getElementById) document.getElementById(Msg).style.visibility = "hidden"; } //--> </script> <style> <!-- #poplink {position:absolute;left:0px; top:30px; z-index:9; visibility:hidden;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>
- ベストアンサー
- HTML
- ネスケ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>
- ベストアンサー
- JavaScript
- マウスオンで説明文をページの真ん中に表示させたい！
よろしくお願いします。 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!」の右側にリンクを箇条書きに書き込んでいきたいんです。 で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。 お願いしますｍ（＿＿）ｍ
- ベストアンサー
- JavaScript
- エンドロールを枠の中で表示するには？
映画のようにエンドロールを枠の中で（<TD>ここに表示したい。</TD>） 下から上へと画像の前に流したいのですがどうすればよいのでしょう？ うまく言えないので下にソースを載せます。 <HTML> <HEAD> <TITLE>●エンドロールのように画面の上方向に流れる</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function roll(){ if(document.all["gyoji2"].style.pixelTop > -180){ document.all["gyoji2"].style.pixelTop -= 1; setTimeout("roll()",50); } if(document.all["gyoji2"].style.pixelTop == -180){ document.all["gyoji2"].style.pixelTop = 150; } } //--> </SCRIPT> </HEAD> <BODY onLoad="roll()" BGCOLOR="#009900" TEXT="#ffffff"> <P><IMG SRC="top_bar.gif" WIDTH="520" HEIGHT="60"></P> <CENTER> <TABLE WIDTH="409" BORDER="1" HEIGHT="205"> <TR> <TD VALIGN="top" HEIGHT="43"> <DIV ALIGN="center"><IMG SRC="bar_s.gif" WIDTH="200" HEIGHT="40"></DIV> </TD> </TR> <TR> <TD ここに表示したい。></TD> </TR> </TABLE> </CENTER> <DIV id="gyoji1" style="position:absolute;left : 243px;top:150px;width:400px;height:90px;clip: rect(0px 400px 90px 0px)}"> <DIV ID="gyoji2" STYLE="position:relative;left:12px;top:150px;width:400px;height:90px;font-size:14pt;color:ffffff;"> <BR><CENTER>今週の行事内容</CENTER><BR> 2日 合同職員会議<BR> 3日 PTA会議<BR> 5日 全校生徒運動会予行演習<BR> 6日 避難訓練(低学年)<BR> 7日 避難訓練(中高学年)実技訓練あり</DIV> </DIV> </BODY> </HTML>
- 締切済み
- JavaScript
- ランダムにメッセージを表示させる方法
メッセージページに書いたものをIFRAMEを使ってスクロール表示させるスクリプトですが、これを改造して 一番先頭からスクロールするのではなく、ランダムに 3行目とかからスクロールさせる方法を教えてください。（スクロールしなくてもランダムに表示されれば良いのですが） ##メッセージ表示ページ 1.html ## <BODY> <P align="center"><iframe id="datamain" src="2.html" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe></P> </BODY> ######メッセージデータページ 2.html ####### <BODY> <DIV id="datacontainer" style="position:absolute;left:5;top:0;width:100%" onmouseover="scrollspeed=0" onmouseout="scrollspeed=cache"> <div>1 メッセージ。</div> <div>2 メッセージ。</div> <div>3 メッセージ。</div> <div>4 メッセージ。</div> </DIV> <DIV> <SCRIPT language="JavaScript1.2"> //<iframe> script by Dynamicdrive.com //Specify speed of scroll. Larger=faster (ie: 5) var scrollspeed=cache=3 function initialize(){ marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height") dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer") dataobj.style.top=5 thelength=dataobj.offsetHeight scrolltest() } function scrolltest(){ dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed if (parseInt(dataobj.style.top)<thelength*(-1)) dataobj.style.top=5 setTimeout("scrolltest()",50) } window.onload=initialize </SCRIPT> </DIV> </BODY>
- ベストアンサー
- JavaScript
- リンクレイヤー表示の切り替えについて
もともとは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>
- ベストアンサー
- JavaScript
- ドロップダウンメニューを短縮したい
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
- このプログラムを改善してくれませんか？。
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
- DIVの高さをかっこよく変える方法
皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>
- 締切済み
- JavaScript
お礼
エリア内にマウスポインタが乗ったとき、 フォームに概要を表示するようにしようかなあ・・・・ と考え直しているところでした。 godakazさんが修正してくださった getElementById に 書き直したらしっかり表示されました！！ ありがとうございます。大変参考になりました。