- 締切済み
DHTMLのFilterについて
画像を徐々に透明化しようと filterのalphaの値を変更しようと ランタイムエラーが出てしまいました 私のパソコンはIE5.5のSP2では正常に動作しましたが、 IE6.0のパソコンでは先のエラーが出てしまいました。 記述に間違いはないと思います。 原因がわからず困っております。 IE6.0ではIE5.5と同じように記述できないのでしょうか？ もしも、原因がわかるからいらっしゃいましたらお願いします また、filterはIE6.0でも使用できるのでしょうか？ あわせて教えてください。 ソースの内容 function shoki(){ document.all.MAIL.filters.alpha.opacity=0; } <BODY onLoad=\"shoki()\" text=\"#FFAAFF\"> <DIV id=\"MAIL\" style=\"position:absolute; top:140px;left:2100px; width:450px;height:10px; visibility:visible; color:white; background-color:black; font-size:14pt; font-family:\'HG丸ゴシックM-PRO\'; filter:shadow(color=#445566,direction=125) blur() alpha(style=0); \"> メリークリスマス<BR> </DIV> 一応必要と思われるところを抜粋しました
- taka2456
- お礼率28% (17/59)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- OKWebAdmin
- ベストアンサー率0% (0/5)
管理者より： 同等の質問があるのでそちらをご参照下さい
関連するQ&A
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- レイヤーを背景だけ透過させたい
お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- HTML
- CSSの背景を半透明
http://www.tacky.cc/program/htm_tips/html/style01a.htmのサイトからサンプル抽出して、色々手を加えていますが、 よく分からなくなってしまいました。そこで質問ですが、下記のプログラムでわからない事があります イメージとしては、アップルの場所は忘れましたが、透明の画像が、3.4重に重なっている感じにしたいと思っています。 <HTML><HEAD> <STYLE TYPE="text/css"> <!-- DIV.sample01 { background-color:#000000; position:relative; top:-70px; right:-00px; height:20px; width:1100px; filter:Alpha(opacity=50); z-index:0; color:#000000; font-size:x-small; padding:3px;} } DIV.sample02 { background-color:#ffffff; position:relative; top:-1100px; right:-100px; height:-100px; width:250px; filter:Alpha(opacity=60); z-index:2; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここから黒の色--> DIV.sample03 { background-color:#2E2921; position:relative; top:-500px; right:-100px; height:300px; width:500px; filter:Alpha(opacity=60); z-index:3; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここまで黒の色--> DIV.sample04 { background-color:#F7CE71; position:relative; top:3000px; right:-10px; height:180px; width:200px; filter:Alpha(opacity=40); z-index:1; color:#000000; font-size:x-small; padding:3px;} } --> --> </STYLE></HEAD> <BODY> <BASEFONT SIZE="2"> <table><tr><td> <DIV CLASS="sample01"> <DIV CLASS="sample02"> <DIV CLASS="sample03"> <DIV CLASS="sample04"> </table></td></tr> </BODY></HTML> このようなプログラムにしましたが、何も表示されなくなってしまいました。 原因はpositionの指定が悪いと思います（pxを変更後おかしくなりました）で、「top:*px;」「right:*px;」 「height:*px;」「width:*px;」の意味がわかりません。高さや長さというのはわかりますが、 それから、「DIV.sample*」の中に「background-color:#F7CE71;」があるのに、さらに「color:#000000;」の二つある 意味がわかりません。サンプルをコピーして、手を加えたので、理解していない部分があるので、参考になる アドバイスお願いします。
- ベストアンサー
- HTML
- 外部CSSです。テーブルにスタイルを適用したいのですが・・・。
ほとんど初心者です。 filter:Alpha(opacity=75)で、半透明にしたいんです。 個別に設定するところまではできたのですが、 外部CSSの方に記述する際、どうしたらいいのかがわかりません。 table,td,th{ font-size : 12px; style="filter:Alpha(opacity=75)"; } と、まずはやってみたのですが間違っているようで＾＾； 一応、普通のテーブルとは分けたいので ”table75”と、名前をつけたいのですが、可能でしょうか？ どう記述したらいいか、どうかアドバイスお願い致します！
- ベストアンサー
- HTML
- 透過背景を解除するにはどうすればいいのでしょうか？
透過背景を解除するにはどうすればいいのでしょうか？ filterとopacityを使って背景色を透過したdivがあります このdivの一部で透過を解除したいのですがどうすればいいのでしょうか？ コードは以下のようなイメージです ---------- ■ HTML <div class="sample1"> ・・・←ここは透過 <div class="sample2"> ・・・←ここは透過にしたくない </div> ・・・ </div> ■ CSS .sample1 { ・・・ opacity: 0.6; ←火狐他用 filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60); ←IE用 } .sample2 { ここに記述する内容が知りたい } ---------- やってみてダメだった方法 ・opacity: 1 ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=100); ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=0,Style=0,Opacity=60); ・sample2に新しい背景色を指定する ・sample2に新しい背景画像を指定する ご存知の方いましたら、よろしくお願いします！
- ベストアンサー
- HTML
- a:hover時のみ、divの背景を変えたい
index.htmlで、ロゴにオンマウスした際に、ページの背景の透明度を変えたいのですが、どう記述していいか分からず困っております。 イメージとして、まずロゴは縦横300pxくらいの大きさで、上下左右センタリングされた位置にあるのですが、ロゴにオンマウスした時に、画面いっぱいの背景が半透明から不透明に変わる…といったものを作りたいです（画像添付しましたが、分かりにくかったら申し訳ないです）。 同じ要領で、ごく簡単に書いたタグがこちら（↓）なのですが、 <html> <head> <style type="text/css"> div{ background-color: #CCCCCC; width: 100px; height: 100px; opacity: 0.5; filter: alpha( opacity=50 ); /* IE */ } a:hover{ opacity: 1; filter: alpha( opacity=100 ); /* IE */ } </style> </head> <body> <div><a>リンク</a></div> </body> </html> div内のa領域にオンマウスした時にだけ、背景の透明度を変えたいのですが、動きません…。しかし、上記の例ですと、たとえ動いてもこれではa要素の背景の透明度しか変わらない気もします。 また、div :hoverは、div領域にオンマウスした時から背景が変わってしまうので、こちらは避けたいです。 今回は子要素から親要素の変更を指定する際の問題だと思ったので、セレクタを組み合わせて色々試したり、検索等もしましたが、どうしても分からないので質問させてください。
- ベストアンサー
- CSS
- IE9環境とIE11環境でのHTMLコード
添付画像の×部分は、本当は画像です。画像が存在しないので×印になっているのですが、以下に記述する質問内容には、画像の有無は無関係です。 添付画像は、Vista-SP2,IE9の画面の一部分です。ISPの自分のエリアにアップしたページを見ています。 上の画像は「Pic1.jpg」、下の画像は「Pic3.jpg」です。 で、実は両画像の間に「Pic2.jpg」が隠れているのです。 HTMLファイルに記述したコードは後段のとおりです。 HTMLファイルの概要は次のとおりです。 (1)Pic1の上をマウスが通過した後、Pic2の上（Pic1とPic3の中間あたり）にマウスを置くとPic2が徐々に鮮明さを増しながら表示される（フェードイン）。 (2)Pic2からマウスを外すと消え（フェードアウト）、再度マウスを載せると表示される。 (3)但し、一旦Pic3の上にマウスを載せると、(1)を実行しない限りPic2は表示されない。 （いずれもクリックは不要です。マウスポインタを通過させるだけです） そこで質問なんですが、上記シナリオは、Vista,IE9まではうまくいきました。 しかし、Windows7,IE11環境ではうまくいかないのです。Pic1にマウスを置いただけでPic2が表示されてしまうのです。しかも直ちに鮮明に。 Windows7,IE11環境でもうまくいくようにするには、どうすればよいのでしょうか。 （コード） <html> <head> <SCRIPT language=JavaScript1.2> <!-- function high(which2) {theobject=which2 highlighting=setInterval("highlightit(theobject)",01) }function low(which2) {clearInterval(highlighting) which2.filters.alpha.opacity=01 }function highlightit(cur2) {if(cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=01 else if(window.highlighting) clearInterval(highlighting) } //--> </SCRIPT> </head> <body> <img onmouseover=cnt.style.visibility="visible" onmouseout=cnt.style.visibility="visible" src="pic1.jpg"> <div id=cnt style="visibility:hidden;"> <IMG onmouseover=high(this) style="FILTER: alpha(opacity=01)" onmouseout=low(this) SRC="pic2.jpg"> </div> <div> <img onmouseover=cnt.style.visibility="hidden" onmouseout=cnt.style.visibility="hidden" src="pic3.jpg"> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- filter内の画像を透過させない方法
いつもお世話になっています。 filter内に位置する画像を透過させない方法を教えて下さい。 背景画像を上下左右に敷き詰めた場合、文字がが読みにくくなるのでfilterを使用しています。 しかしながらこの方法ではロゴや写真など透過させたくない画像までfilterがかかってしまいます。 自分でも試行錯誤を繰り返してみました。 filter効果を設定してあるdivを新しいdivで囲んで画像をpositionで指定してみたところ、IEではロゴが透過しませんでしたが、Firefoxではやはり透過されていました。 IEはcssなどの解釈がかなりいい加減と聞いていますので、Firefoxの表示を信用した方がいいように思われます。 Firefoxなど他のブラウザでも画像を透過させない方法はあるのでしょうか？ ご存知の方、いらっしゃいましたら教えて下さい。 参考のため、ソースを下記に貼っておきます。 htmlやcssに関しては本やwebで検索しながら勉強中ですので、根本的な勘違い等あるかもしれません。 HTML部分 <body> <div id="page"> <h1><img src="image/logo.jpg" width="217" height="43" alt="My Web Site" /></h1> <div id="contents"> <div id="main"> <p>---本文---</p> </div><!-- main end --> </div><!-- contents end --> </div><!-- page end --> </body> css部分 div#page { width: 720px; margin-right: auto; margin-left: auto; padding: 0; position: relative; } div#page h1 { position: absolute; top: 50px; left: 251px; } div#contents { width: 720px; margin: 0 auto; padding: 0; text-align: left; background-color: #fff; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } div#main { width: 680px; margin: 0 auto; padding: 100px 20px 0 20px; }
- ベストアンサー
- HTML
- 影付き文字の表示
スタイルシートで <span style="width:100%;filter:blur(add=1,direction=135,strength=20)"> <FONT SIZE="6" COLOR="blue"><B>サンプル</B></FONT></span> のように作成した「サンプル」の文字が以前は影が表示出きていたのに最近表示出きません又、 <div style="width:100%; filter:shadow(color=#666666,direction=135)"> <IMG SRC="images/***.Jpg" ALT="***" WIDTH="240" HEIGHT="180" BORDER="0"></div> で写真に影を付けていたのですが同じように最近は表示出来ません。 何が原因なのでしょうか？ 教えて下さい。
- 締切済み
- その他（インターネット・Webサービス）
- ▲▲パソコンの中ではリンクできるが、INET上ではPageが表示されない。。。▲▲
このように作成しました。INET上ではリンクできません。助けててください。</head>より上はカットしました。 <body> <hr color="#0000FF" style="filter:alpha(opacity=100,finishopacity=0,style=3);" width="350"> <font size="3"><div align="center">Hand-made HTML</div></font> <hr color="#0000FF" style="filter:alpha(opacity=100,finishopacity=0,style=3);" width="350"><br> <br> <font size="2"><div align="center">本日は、Hideyuki.comのHTML講座にお越し頂きまして、ありがとう御座います。<br> ここでは、HTMLについてご説明しています。勿論サイト自体も、手打ちで作っています。<br> 心行くまで、楽しんでいって下さい。</div></font></td> <br> <HR color="#777777" style="filter:alpha(opacity=100,finishopacity=0,style=3);"> <br> <br> <font size="3"><a href="Hand-made_HTML_HTML概要.html" style="text-decoration:none;">■HTML概要</a></font><br> <font size="2">- HTMLを簡単に説明しています -</font><br> <br> <font size="3"><a href="Hand-made_HTML_HTML基本.html" style="text-decoration:none;">■HTML基本</a></font><br> <font size="2">- HTMLの基本をご説明しています -</font><br> <br> <font size="3"><a href="Hand-made_HTML_Web概要.html" style="text-decoration:none;">■Web概要</a></font><br> <font size="2">- HTMLを深く学ぶ前に少しWebの勉強をしましょう -</font> </body> </html>
- ベストアンサー
- HTML
