【おやじのweb技】 html/javascript/css等
winXP+IE6
TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close

m015

画像やセルにマウスを重ねると画像やセル背景色の透明度が変わる

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

action

【技m015-1】画像やセルにマウスオンしたとき透明度が変わる
画像やセルにマウスカーソルを重ねる透明度が変わります。
画像
セル 背景色blue 背景色blue
【技m015-2】セルやテキストフィールド等の背景色を透明にする(style.background:transparent)
セルやテキストフィールドにマウスカーソルを重ねると背景色が透明になります。
セル 背景色blue      
フォーム

web技

■【技m015-1】画像やセルにマウスオンしたとき透明度が変わる
※filter="alpha(opacity=100)"を用いて透明度を設定しています
※透明度が一番高いのがopacity=0、全く不透明がopacity=100で1刻みで指定します

◆マウスを重ねると画像の透明度が変わる
※下記の例ではclass属性/title属性は省略しています

-----左側の行の例/次の行から(copy)-----
<td>
<img src="photo/015_s.JPG" alt="" height="165" width="220"
  onmouseover="this.style.filter='alpha(opacity=50)'"
  onmouseout="this.style.filter='alpha(opacity=100)'">
</td>
-----上の行まで(copy)-----

-----右側の行の例/次の行から(copy)-----
<td>
<img src="photo/002_s.JPG" alt="" height="165" width="220" style="filter:alpha(opacity=50);"
  onmouseover="this.style.filter='alpha(opacity=100)'"
  onmouseout="this.style.filter='alpha(opacity=50)'">
</td>
-----上の行まで(copy)-----

◆マスウを重ねるとセルの透明度が変わる
※下記の例ではclass属性/title属性は省略しています

-----左側の行の例/次の行から(copy)-----
<td style="color:#ffffff; background:blue;"
  onmouseover="this.style.filter='alpha(opacity=50)'"
  onmouseout="this.style.filter='alpha(opacity=100)'">背景色blue
</td>
-----上の行まで(copy)-----

-----右側の行の例/次の行から(copy)-----
<td style="color:#ffffff; background:blue; filter:alpha(opacity=50);"
  onmouseover="this.style.filter='alpha(opacity=100)'"
  onmouseout="this.style.filter='alpha(opacity=50)'">背景色blue
</td>
-----上の行まで(copy)-----

■【技m015-2】セルやテキストフィールド等の背景色を透明にする(style.background:transparent)

◆セルの背景色を透明にする
※セルの背景色を透明(transparent)に設定しています
※下記の例ではclass属性/title属性は省略しています

-----次の行から(copy)-----
<td style="background:red;"
  onmouseover="this.style.background='transparent'"
  onmouseout="this.style.background='red'">背景色blue
</td>
-----上の行まで(copy)-----

◆テキストフィールドの背景色を透明にする
※テキストフィールドの背景色(デフォルトは白)を透明色(transparent)にします
※下記の例ではclass属性/title属性は省略しています

-----左側の行の例/次の行から(copy)-----
<td bgcolor="blue">
<input type="text" name="TBOX1" value="背景色未指定" size="35" readonly
  onmouseover="this.style.background='transparent'"
  onmouseout="this.style.background='white'">
</td>
-----上の行まで(copy)-----

-----右側の行の例/次の行から(copy)-----
<td>
<input type="text" name="TBOX2" value="背景色skyblue" size="35" style="background:skyblue;" readonly
  onmouseover="this.style.background='transparent'"
  onmouseout="this.style.background='skyblue'">
</td>
-----上の行まで(copy)-----

解説等

◆透明度opacityはIE限定技だと思いました---未確認ですが
※半透明の複数の画像を重ねて配置しマウスカーソルが重なったら、その画像がカラー画像に戻り一番上に表示される、などという[技m009]との合わせ技等も効果的かも知れませんね。

【応用技】(透明度opacity)
◆[技m003]画像にマウスを重ねるとコメントをポップアップウィンドウに表示する
※ポップアップウィンドウの背景色を半透明に設定しています
◆[技g007]画像をフェードイン・フェードアウトする
※画像のフェードイン・フェードアウトは、透明度を連続的に変えて実現します

【関連技】(背景色tranparent)
◆[技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わる
※背景色を指定するとき「透明色」を指定するだけです

keyword

◇style◇filter◇alpha◇opacity◇background:transparent

注意

◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----

access count