- 締切済み
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>
- aido
- お礼率85% (34/40)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
あらかじめz-indexも設定してあるスタイルシートのクラスを作成しておいて、スクリプトの動作ではdocument.getElementById(**).classNameを利用して、対象の要素のクラス名を変更することで、適用されるスタイルシートを入れ替え、z-indexの値を擬似的に操作するという方法ではいかがでしょうか。 Operaでも動作するDHTMLを作ろうとしたときに、この方法を利用したことがありますので、Operaではこの方法で動作してくれると思います。 MacIE(バージョンはいくつでしょうか?)では試したことがありませんので、これで解決できるかは不明ですが… 参考になれば…見当違いでしたら、ごめんなさい。
関連するQ&A
- ネットスケープ６以上で表示できるようにしたい
N6以上で動作しないのです。 どなたか動作する書き方を教えて下さい。 お願いします。 <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.layers)document.layers[layName].bgColor=color if(document.all)document.all(layName).style.backgroundColor=color } function zindexLAYER(layName,zindex){ if(document.layers)document.layers[layName].zIndex=zindex if(document.all)document.all(layName).style.zIndex=zindex } function c02ini(){ setBGCOLOR('msg1','#d8bfd8') setBGCOLOR('msg2','#f5deb3') } function swtOnZ(layName){ zindexLAYER('msg1',0);zindexLAYER('msg2',0) zindexLAYER(layName,2) } //--> </SCRIPT> <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"> <BR>Page1説明 </DIV> <DIV CLASS="lays" ID="msg2"> <BR>Page2説明 </DIV>
- ベストアンサー
- JavaScript
- ネスケ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
- 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
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- マウスオーバー時の文字サイズ
テキスト文にマウスを合わせると指定したポイントに文字列を表すようにしたいです。 -------------------------------------- <SCRIPT language="JavaScript"> <!-- msg=new Array(); msg[0]=""; msg[1]="こんにちは"; function Msg(index){ if(document.all){ box.innerHTML = msg[index]; }else if(document.layers){ document.box.document.open(); document.box.document.write(msg[index]); document.box.document.close(); } } //--> </SCRIPT> <DIV id="box" style="position:absolute;top:250;left:350;"></DIV> <a href="http://abc.html" target="_blank" onMouseOver="Msg(1)" onMouseOut="Msg(0)">あいさつ</a> ------------------------------------ 上記の文章はどこかのサイトにある構文をコピペ、参考にさせていただいたものです。 これで一応表示されるのですが、 このとき、表示される「こんにちは」の文字サイズ、色を指定することは出来ますでしょうか？ また、座標を指定していますが、ブラウザーやOS、解像度などの違いが表示に影響することはありませんでしょうか？
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- 砂時計について教えてください。
下のように記述すると、NN、Firefoxの最新版では特に何もないのですが、IEの最新版ではマウスカーソルを動かすたびに砂時計がチカチカと出る理由を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/JavaScript"> <!-- function over(){document.getElementById("menu0").style.display="block";} function over2(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } document.getElementById("menu"+n).style.display="block"; document.getElementById("menu"+n).style.top=(n*20)-20+"px"; } function out(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } } //--> </script> <table cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="menu0" style="display:none;"> <div onmouseover="over2(1)"><a href="url01.html">link01</a></div> </div> </td> <td valign="top"> <div id="menu1" style="display:none;" onmouseover="over2(1)" onmouseout="out(1)"> <div><a href="url11.html">link11</a></div> </div> <div id="menu2" style="display:none;" onmouseover="over2(2)" onmouseout="out(2)"> <div><a href="url21.html">link21</a></div> </div> <div id="menu3" style="display:none;" onmouseover="over2(3)" onmouseout="out(3)"> <div><a href="url31.html">link31</a></div> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
- あとだしじゃんけんで
こんにちは。趣味でjavascriptをしている者です。 さっそくですが質問させていただきます あとだしじゃんけんを作っているのですが、 キーコードによって、グー、チョキ、パーを表示させることが できません・・・ 以下のコードの悪い点を指摘していただけないでしょうか よろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.onkeypress = KeyPressed; } function KeyPressed() { switch(event.keyCode) { case 49: appendElement ( "Mytable", "jk/Myhand1.jpg"); break; case 50: appendElement( "Mytable", "jk/Myhand2.jpg"); break; case 51: appendElement( "Mytable", "jk/Myhand3.jpg"); break; default: break; } } function henkou() { document.getElementById("span1").childNodes[0].nodeValue = "こんばんは!!"; } function removeElement( id ) { var obj = document.getElementById( id ); if ( obj.hasChildNodes() ) { obj.removeChild( obj.lastChild ); } } function appendElement( pid, src) { var pobj = document.getElementById( pid ); var cobj = document.createElement("img"); cobj.src = src; pobj.appendChild( cobj ); } </script> </head> <body bgColor="rgb(230,240,250)"> <form name="Form1"> <input type="button" value="変更" onClick="henkou()"> <input type="button" value="remove1" onClick="removeElement( 'PCtable' );"> <input type="button" value="remove2" onClick="removeElement( 'Mytable' );"><br> <input type="button" value="append1" onClick="appendElement( 'PCtable', 'jk/PChand3.jpg' );"> </form> <div id="div1" style="position:absolute; left:130px; top:80px;"> <table width="200" height="200" bgColor="00ef66"> <td id="PCtable"> <img id="PHi" src="jk/PChand1.jpg"></td></table> </div> <div id="div2" style="position:absolute; left:430px; top:80px;"> <table width="200" height="200" bgColor="00ef66"> <td id="Mytable"> <img id="MHi" src="jk/Myhand1.jpg"></td></table> </div> <div style="position:absolute; left:360px; top:210px;"> <span id="spanvs" style="color:#ff2244; font-size:36px; font-weight:bold;"> VS </span> </div> <div style="position:absolute; left:100px; top:310px;"> <span id="span1" style="color:#0055ff; font-size:26px; font-weight:bold;"> こんにちは </span> </div> <div style="position:absolute; left:100px; top:350px;"> <span id="span1" style="color:#00ff55; font-size:26px; font-weight:bold;"> おはようございます </span> </div> </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>
- ベストアンサー
- その他(ソフトウェア)
お礼
ありがとうございました。 参考にさせて頂きます。