レイヤーのクリッピングを解除するにはどうすれば良いですか
- レイヤーのクリッピング解除方法について教えてください。
- クリッピングを解除するためのJavaScriptのコードを教えてください。
- クリッピングを解除する方法について分からないので、質問させていただきました。
- ベストアンサー
レイヤーのクリッピングを解除するにはどうすれば良いですか
難しい内容かもしれませんが、宜しくお願いします。 IE4 や NN4 で例えば以下の様に、 'lay'という名前のレイヤーを作成したとします。 <DIV ID='lay' STYLE='position:absolute'></DIV> すると以下の様に、JavaScriptから文字列 htm をレイヤーに書き込めます。 //IEの場合 document.all('lay').innerHTML=htm; //NNの場合 document.layers['lay'].document.open(); document.layers['lay'].document.write(htm); document.layers['lay'].document.close(); そしてレイヤーのサイズも文字列 htm の内容に合わせて変化します。 しかし以下の様に、１度でもレイヤーをクリッピングした後に、 //IEの場合 document.all('lay').style.width=100; document.all('lay').style.height=100; document.all('lay').style.clip='rect(0,100,100,0)'; //NNの場合 document.layers['lay'].clip.left=0; document.layers['lay'].clip.right=100; document.layers['lay'].clip.bottom=100; document.layers['lay'].clip.top=0; このレイヤーをクリッピングする前の、 文字列 htm の内容に合わせてサイズが変化していた頃の状態に、 戻す方法が分からなくて困っております。 やっぱり無理でしょうか。 何の回答もないとサミシイので、わからなくても誰か返事してあげて下さい。
- tasahamu
- お礼率88% (45/51)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEでしか調べていませんが、rectにautoを指定するともとに戻るようです。 しかしここで言う”もとに戻る”は指定されているスタイルシート（レイヤー？） の大きさに戻るという意味なので、 >document.all('lay').style.width=100; >document.all('lay').style.height=100; と指定されるとここに”戻る”ようです。 以下は私が書いたテストHtmlです。参考になれば幸いです。 <HTML> <HEAD> <TITLE>test</TITLE> <SCRIPT Language="JavaScript"> <!-- function fn1(){ htm="testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest" document.all('lay').innerHTML=htm; } function fn2(){ document.all('lay').style.clip='rect(0,100,100,0)'; } function fn3(){ document.all('lay').style.clip='rect(auto,auto,auto,auto)'; } // --> </SCRIPT> </HEAD> <BODY> <DIV ID='lay' STYLE="position:absolute;background-color:#CCCCFF"> </DIV> <BR><BR><BR><BR> <FORM> <INPUT TYPE="button" onClick="fn1()" VALUE="入力"> <INPUT TYPE="button" onClick="fn2()" VALUE="DoClip"> <INPUT TYPE="button" onClick="fn3()" VALUE="return"> </FORM> </BODY> </HTML>
その他の回答 (1)
- b-takeda
- ベストアンサー率33% (7/21)
参考にしていただいたようで良かったです。 少し気になったところと思いつたことが有ったので補足します。 クリッピングはレイヤーの表示する範囲を決めるだけなので、autoを使用しても、 元に戻る（クリッピングを解除する）と言うわけではなく、 auto（通常）の位置にクリッピングするだけだと思うんですね。 だからＮＮでも >document.layers['lay'].document.write(htm); を実行したとき、この時点のクリップの位置を（グローバル）変数に 取っておけば良いと思います。具体的には hensu1=document.layers['lay'].clip.left; hensu2=document.layers['lay'].clip.right; hensu3=document.layers['lay'].clip.bottom; hensu4=document.layers['lay'].clip.top; hensu5=document.layers['lay'].clip.width; hensu6=document.layers['lay'].clip.height; って感じです。 こうすれば、後でいろいろクリッピングしても、戻したいときに document.layers['lay'].clip.left=hensu1; document.layers['lay'].clip.right=hensu2; document.layers['lay'].clip.bottom=hensu3; document.layers['lay'].clip.top=hensu4; document.layers['lay'].clip.width=hensu5; document.layers['lay'].clip.height=hensu6; と指定すれば良いんじゃないかと思います。 この方法だとIEでも使えそうですね。 ＮＮでは全くスクリプトを作ったことが無いので自信は有りませんが・・
関連するQ&A
- 初期画像にレイヤーが出てしまう
ＨＰにレイヤー設定をしたところ、画像を開けるとすぐレイヤーが出てしまいます。しかし、その画像でマウスを重ねたり外したりすれば、問題なく作動します。その後、ＨＰを開けると、また最初だけレイヤーが表示されてしまいます。どのようにしたら、最初の画面で表示されないようになるでしょうか？よろしくお願い致します。 次のように設定しています。 <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> これだけです。何か足りないでしょうか？
- ベストアンサー
- JavaScript
- 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では何も起こりません。 どなたかどのように表記をすればいいのか教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- webサイトで文字にマウスを重ねた時に文章を表示させたい
ウェブサイトで、JavaScriptを使用し、「挨拶」の文字にマウスを重ねた時、「こんばんは。」と表示されるようにしたいのですが、上手くいきません。 下記は私が記述したソースになります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <html> <head> <title>テスト</title> <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> </head> <body ONLOAD="preloadImages();"> <!-- 表示するレイヤー --> <div id="link2" style="position:absolute; width:600px; height:80px; z- index:1; left: 80px; top: 600px; visibility: hidden"> こんばんは。</div> <!-- ここまで --> <a href="http://www.geocities.co.jp/Milkyway/1958/" onMouseOver="Lay_View('link2','visible');Lay_View('linka','hidden');" onMouseOut="Lay_View('link2','hidden');Lay_View('linka','visible');" > 挨拶</a> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー この場合IEでは、ちゃんと表示されるのですが、Firefox等で見た場合、何も表示されません。どうすれば、他のwebブラウザにも対応できるのでしょうか？ JavaScriptは初心者なので、修正すべき場所とコードを詳しく教えて頂けると助かります。よろしくお願い致します。
- ベストアンサー
- JavaScript
- writeメソッドでレイヤーに書き出す
こんばんは。 JavaScriptを勉強していて、いくらかの本を買いました。 そこのリファレンスの「writeメソッド」に、 『文字列を書き出すドキュメントオブジェクトモデルの指定は、 フレーム.documentや、レイヤー.document』 と、書いてありました。 フレームのほうは書き出しで来たのですが、 レイヤーのほうがうまく出来ません。 <div id="data" name="data"></div> <script> document.getElementById('data').document.write('str'); </script> 上のようにやりました。 他にも、 data.write('str'); document.data.write('str'); document['data'].write('str'); 等々・・・ これは、NN用のものなのでしょうか。 NNをもっていないのでわかりません。 レイヤーというものがDIVにすること自体が間違っているのでしょうか。 教えてください。
- ベストアンサー
- JavaScript
- JavaScriptでセンター表示で行き詰まってしまいました。
JavaScriptでセンター表示で行き詰まってしまいました。 どうしてもできません。 現在しようとしているのが、HP全面に画像を表示させ、 そのセンターに日時時間を表示させたいと思っています。 いろいろwebで調べて、センター表示ではないのですが、 下記の形を組み込みました。 IEとsafariでは問題無いのですが、Firefoxでは、画面の左上端に表示されてしまいます。 どなたか、ご教授いただければ助かります！ また常に画面のセンター表示も可能なのでしょうか？ ↓↓↓↓↓head内 <script language="JavaScript"> <!--// my_width=250; x_iti=450; y_iti=350; function tokei() { a=new Date(); b=a.getFullYear(); c=a.getMonth(); d=a.getDate(); e=a.getHours(); f=a.getMinutes(); g=a.getSeconds(); if(c<10)c="0"+c; if(d<10)d="0"+d; if(e<10)e="0"+e; if(f<10)f="0"+f; if(g<10)g="0"+g; moji="<strong>"+b+"."+c+"."+d+" "+e+"："+f+"："+g+"</strong>"; if(document.layers) { document.layers["lay0"].moveTo(x_iti,y_iti); document.layers["lay0"].clip.width=my_width; document.layers["lay0"].document.open(); document.layers["lay0"].document.write(moji); document.layers["lay0"].document.close(); } else if((document.getElementById) && (!document.all)) { document.getElementById("lay0").style.pixelLeft=x_iti; document.getElementById("lay0").style.pixelTop=y_iti; document.getElementById("lay0").innerHTML=moji; document.getElementById("lay0").style.width=my_width; } else if(document.all) { document.all("lay0").style.pixelLeft=x_iti; document.all("lay0").style.pixelTop=y_iti; document.all("lay0").innerHTML=moji; document.all("lay0").style.width=my_width; } clearTimeout(g); g=setTimeout('tokei()',1000); } //--> </script> ↓↓↓↓↓body内 <body onLoad="tokei();"> <span id="lay0" style="position:absolute;visibility:visible;color:#FFFFFF"></span>
- ベストアンサー
- JavaScript
- レイヤーに書き込むには
JavaScript 初心者ですが、 document.write(string); が含まれる関数を呼び出してレイヤーに文字列を書き出したいのですが、ページ全体に書き出されてしまいます。レイヤーの文字のみ変更するにはどうすればよいのでしょうか。 <html> <head> </head> <body> <div id="layer1"> <script type="text/javascript"> <!-- function function1() { document.write("Hello, World!"); } //--> </script> </div> <input type="button" onclick="function1()" /> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- 文字の大きさや色の変更
よろしくお願いします。 時刻表示のスクリプトを使いたいのですが 設置したいページにタグを貼ると 色や文字の大きさはページにセットしてあるスタイルシートで揃えることが出来るのですが 他のスクリプトと競合？を起こしてしまい動かないものが出てきました。 そこで時刻表示の部分だけインラインフレームで表示したいため色や文字の大きさなどを追加しようと思いますがエラーばかり出てしまい困っています。 スクリプトは <html> <head> </head> <body onload="tokeiFunc()"> <SCRIPT Language="JavaScript"> <!-- if (navigator.appName == "Microsoft Internet Explorer") myApp="IE"; else if (navigator.appName == "Netscape") myApp="NN"; else myApp=""; myVer = navigator.appVersion.charAt(0); function tokeiFunc(){ myD=new Date(); myTime= myD.getHours()+"時"+myD.getMinutes()+"分"; myMsg = myTime; if ((myApp == "IE") && (myVer >= 4)){ document.all("myIDdate").innerHTML = myMsg; }else if ((myApp == "NN") && (myVer >= 4)) { document.layers["myIDdate"].document.open(); document.layers["myIDdate"].document.write(myMsg); document.layers["myIDdate"].document.close(); } setTimeout("tokeiFunc()",1000); } // --> </script> <div ID="myIDdate" STYLE="position:absolute"></div> この中のどこを書き加えればよいのでしょうか？ また、競合を起こしてしまう場合呼び出す名前？を別のものにしてやればいいということを聞いたことがありますがどれが名前になるのか、変更する名前は何でもいいのか、そのへんがよく分かりません。こういうことが実際出来るのでしょうか？ お知恵をお貸しください。よろしくお願いします。
- ベストアンサー
- JavaScript
- つづきです・2
先ほどの質問のプログラムです。 どうぞよろしくお願いいたします。 （＊印はサイトアドレスまたはファイル名です。） <script tupe="text/javascript"> <!-- window.onerror=null function getMouseX(e){ if(document.layers)return e.pageX if(document.all) return document.body.scrollLeft+event.clientX } function getMouseY(e){ if(document.layers)return e.pageY if(document.all) return document.body.scrollLeft+event.clientY } function moveLAYER(layName,x,y){ if(document.layers)document.layers[layName].moveTo(x,y) //NN用 if(document.all)document.all(layName).style.pixelLeft=x //IE用 if(document.all)document.all(layName).style.pixelTop=y //IE用 } function setBGCOLOR(layName,color){ if(document.layers)document.layers[layName].bgColor=color if(document.all)document.all(layName).style.backgroundColor=color } var nn4=!!document.layers var ie4=!!document.all function showHELP(no,e){ var offsetx=1 var offsety=1 moveLAYER('helplay'+no,(getMouseX(e)+offsetx),(getMouseY(e)+offsety)) } function hideHELP(no,e){ moveLAYER('helplay'+no,-100,-3) } //--> </script> <STYLE TYPE="text/css"> <!-- A { font-family:Osaka,Arial;font-size:10pt } .helplay { position:absolute;top:-100;left:-3 <!----> </STYLE> </head> <body bgcolor="#969696" link="#3c3c3c" text="white"> （つづきます） 関連URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=453166
- 締切済み
- JavaScript
- レイヤー内のフォームの内容を変更するにはどうすれば？
JavaScriptを使って,テキストボックスに書かれている内容を変更できる様にしたいいのですが,フォームがレイヤー内にあるとうまく出来ません。 こちらがソースです。あくまで例です。ボタンをクリックすると書かれている内容が変わります。 <html> <head> <script lauguage="javascript"> function Form_Write(){ document.form.box.value="Click=true"; } </script> </head> <body> <div id=layer style="position:absolute;left:50px;top:50px;"> <form name="form"> <input type="text" name="box" size=20 value="Click=false"> <input type="button" name="button" value="click" onClick="Form_Write()"> </form> </div> </body> </html> これだとIEではうまく作動するのですが,NNだとうまく動きません。 document.layer.form.box.valueにしてもダメです。 document.layer.form has no propertiesというエラーが出ます。 どうすれば出来るのでしょうか？お助け願います。
- ベストアンサー
- 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
お礼
凄いです！！ 早速、IEで試してみると、 document.all('lay').style.width=0; document.all('lay').style.height=0; document.all('lay').style.clip='rect(auto,auto,auto,auto)'; で完全に元に戻りました。（凄すぎるぅぅぅ！！） 本当に本当にありがとうございました。 しかし、NNの方は auto を指定してもダメでした。 現在作成中のJavaScriptは、NNでも動作させたいので、 NNの方でご存知のお方は引き続きお待ちしております。 宜しくお願い致します。