Chromaフィルタとは

　HOME 　>>> 　HTML整理ノート　>>> DHTML -- 基本編　　　応用編

Chromaフィルタ

オブジェクトから指定した色を透明にし、その部分は背景が透けて見える。
(HTML)･･･ style="filter:chroma(color=色値を指定)";
(Script)･･･ ID名.style.filter = "chroma(color=色値を指定)";
Scriptで色値を変更する場合･･･ID名.filters.chroma.Color = 色値を指定;
　(注)"color"ではｴﾗｰになる。先頭文字は必ず大文字にし、"Color"のように。

IE5.5以降の書式

(HTML)<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Chroma(color=色値を指定)">
(Script)object.style.filter ="progid:DXImageTransform.Microsoft.Chroma(color=色値を指定)"

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function ChromaGo(c){
  logo.style.filter = "chroma(color=" + c + ")";
}
function ChromaGo2(c){  //IE5.5の書式で
  logo.style.filter = "progid:DXImageTransform.Microsoft.Chroma(color=" + c + ")";
}
//--></script>
<body>

<img id="logo" src="../img/kodayan01.gif" width="229" height="65">
<form>
★Chromaに設定する色を下のボタンで選択してください。その色が透明化されます。
 <input type="button" value="背景色(ｸﾞﾚｰ)" onclick="ChromaGo('#666666')">
 <input type="button" value="Kodayan(青)" onclick="ChromaGo('#0000ff')">
 <input type="button" value="HomePage(緑)" onclick="ChromaGo('#009933')">
 <input type="button" value="クリア" onclick="logo.style.filter = '';">
★IE5.5から書式が変更された。以下のボタンは新しい書式を適用したものです。<br>
  <input type="button" value="背景色(ｸﾞﾚｰ)" onclick="ChromaGo2('#666666')">
  <input type="button" value="Kodayan(青)" onclick="ChromaGo2('#0000ff')">
  <input type="button" value="HomePage(緑)" onclick="ChromaGo2('#009933')">
  <input type="button" value="クリア" onclick="logo.style.filter = '';">
</form>

end(最終更新:12/11/11)