ＩＥでご覧のユーザーは「画像の透明化」の文字が点いたり消えたりしているように見えている と思います。それ以外のブラウザでご覧の方はただのピンクの長方形です。 これはＩＥ独自のトランジション（時間の経過で状態を変化させるフィルター）です。 「画像の透明化」は3枚の画像ファイルの中に透明の画像を一枚入れただけです。 スクリプトご希望の方はtomeika.jsファイルをダウンロード。下記のタグをHEAD内に貼り付け ます。 <SCRIPT src="tomeika.js"></SCRIPT> BODY内は下記をコピペします。 <DIV id="content" style="position: absolute; background-color : #ff99ff; top:30px; left:150px; width:445px; height:75px; text-align:center; filter: revealTrans(Transition=12, Duration=3)} z-index : -1;"> </DIV> 最後に<BODY onload="dotransition();">と修正。赤字部分とtomeika.jsファイルを右クリック 編集で開いて、画像ファイル名を変更します。 なおトランジションの効果はこちらに「トランジションのリファレンス」として番号が紹介されて いますので、番号を変えて試してください。Durationは効果の持続時間です。
にするフィルターです。 <IMG SRC="toumei1.gif" ALT="" WIDTH="460" HEIGHT="70" STYLE="filter: alpha(style=0, opacity=70);"> style=0は画像全体に一定の透明度（opacity=70）を掛ける時の値です。 もちろん普通のスタイルシートのようにページ全体に指定することもできます。 style=0以外はこんな形になります。1が線状、2が円状、3が長方形のグラデーションです。 AlphaフィルターはこれまでIEだけに対応してきましたが、最近タグを加えることで Netscape、Mozillaでも表示できるようになりました。Operaはまだだめです。 タグは-moz-opacity:0.5;を加えるだけですが、上のＩＥのように画像に直接掛けることは できません。このように記述してください。 画像ではなく、背景の透明度を変えて、画像が透明化しているように見せるタグです。 やはりOperaでは機能しません。
<img src="画像ファイル名" style="filter:Chroma(color=透過したい色)" width="××" 定できず、きれいに透過できませんでした。普通のgif画像ならblue、redの指定でできます。 HEAD内で指定すると文字も画像も指定色を透過できます。 この場合薄い空色を透過してますが最初から透過しているので、Web的に面白くありません。 そこでJavaスクリプトのロールオーバーのようにマウスを乗せた時透過するようにします。 サンプル1 サンプル2 スタイルシートは表示位置やサイズなどタグも単位もバラバラなので、とりあえずコピペで 表示していただいてＣＳＳのリファレンスサイトを見て、修正してください。 特にサンプル２はHTML部分からコピペしないと機能しないので注意してください。 フィルターchroma は指定色を透過しましたが、逆に指定色以外を透過することもできます。 フィルターmaskです。これは本来透明な部分を指定色でマスク、本来色が付いている部分 を透過します。サンプルを見てください。 フィルターchromaと比べると一番上の「画像の 透明化」の文字が真逆になっていることが判ると思います。 下の画像も彩色部分が透過されています。基本タグは下記です。 <p style="filter:mask(color=××);width:××px;height:××px;"><font size="×">画像の透明化</font></p> なおフィルター、トランジションのサンプルがMicrosoftのサイトから入手できます。 フィルターかトランジションを選択。フィルター、スタイル等を設定、copy codeでＨＴＭＬファイル がクリップボードに自動生成されますので、ペースト。ファイル名、サイズの変更だけです。
A:HOVERタグ。マウスがリンクに乗った時文字を変化させる（Microsoftもそうです）タグです。 これは当然全ブラウザで使えます。 画像無しで、セルの色を変えることで変化させています。 これはＨＰビルダーでもできます。スタイルシートマネージャーを起動。 追加で出てきたスタイルの設定ダイアログのＨＴＭＬの候補からA:HOVERタグを選択。 カラーと背景欄の前景色が文字色、背景色がセルの色になります。 画像に応用する時基本タグはメニューと一緒です。ＨＥＡＤ内に下記。 <STYLE type="text/css"> <!-- A:HOVER{ color : ; background-color : #fd7f05; } table { height:75px; width="454; overflow: hidden; } --> </STYLE> BODY内にリンクタグを入れます。 <A HREF="〜"><IMG src="toumei6.gif" width="454" height="75" border="0"></A> <BODY bgcolor="#fd7f05">とするとＩＥでは完全に消えますが他のブラウザでは下のように なります。画像が文字サイズ（高さ）ならできますが、ブラウザ毎文字サイズの違いで若干ズレ ます。
ロールオーバーならＪａｖａスクリプトでできるし、ソフトを使えば簡単なのに…。  ←この画像全部で6.76KB（一枚は1.35KB6枚で8.10KBです。画像一枚でロールオーバー。 タグはＨＥＡＤ内に <link rel="stylesheet" href="roll-2.css" type="text/css"> BODY内に<ul id="menu2"> <li><A href="#" class="top"></A></li> <li><A href="#" class="home"></A></li> <li><A href="#" class="back"></A></li> </ul> だけと非常にお手軽になっています。roll-2.cssの解説はこちら。
その中から、無償或いは１万円以下で手ごろなソフトの使い方を、透明化をテーマに紹介して いきます。その中でわかりにくいレイヤーやプラグインフィルターについて解説していきます。 どんなソフトにも付いている消しゴムの使い方はこちら。
|
