■次の文字にマウスを載せると、各フィルタ効果が適用できます
[X-Ray]
[Grayscale]
[色反転]
Filter
IE4での書式で
- (HTML)
<ELEMENT style = "filter:xray()">
<ELEMENT style = "filter:gray()">
<ELEMENT style = "filter:invert()">
- (Script)
object.style.filter = "xray()";
object.style.filter = "gray()";
object.style.filter = "invert()";
IE5.5〜の書式で
- (HTML)
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Xray()">
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)">
<ELEMENT STYLE="filter:DXImageTransform.Microsoft.Invert()">
- (Script)
object.style.filter ="DXImageTransform.Microsoft.Xray()" ; ････(注1)
object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
object.style.filter ="DXImageTransform.Microsoft.Invert()" ; ････(注1)
- (注1)何故か？フィルタが効かない？？？、やむなく以下の書式を使いました。
object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(xray=1)";
object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(invert=1)";
Sample Source......................................................................>>>
<STYLE TYPE="text/css">
<!--
span {width:150;color:green;font:30}
-->
</STYLE>
<script language="JavaScript"><!--
function Filter1(n){ //IE4の書式で
if(n==1)dv.style.filter="xray";
if(n==2)dv.style.filter="gray";
if(n==3)dv.style.filter="invert";
if(n==4)dv.style.filter="";
}
function Filter2(n){ //IE5.5〜の書式で
if(n==1)dv.style.filter="progid:DXImageTransform.Microsoft.BasicImage(xray=1)";
if(n==2)dv.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
if(n==3)dv.style.filter="progid:DXImageTransform.Microsoft.BasicImage(invert=1)";
if(n==4)dv.style.filter="";
}
//--></script>
</head>
<body>
<span onMouseover="this.style.filter='xray'" onMouseout="this.style.filter=''">[X-Ray]</span>
<span onMouseover="this.style.filter='gray'" onMouseout="this.style.filter=''">[Grayscale]</span>
<span onMouseover="this.style.filter='invert'" onMouseout="this.style.filter=''">[色反転]</span></p>
<div id="dv" style="position:absolute">
<img src="../../java/jadata/ja02a.jpg" width="200" height="150">
<img src="../../images/cut/025.gif" width="103" height="116">
<span style="color:green;font:60">Filter</span>
</div>
<form>
<p>■次のﾎﾞﾀﾝで各ﾌｨﾙﾀ効果を適用します（IE4の書式で）<br>
<input type="button" value="X-Ray(X線)" onclick="Filter1(1);">
<input type="button" value="Grayscale" onclick="Filter1(2);">
<input type="button" value="Invert(色反転)" onclick="Filter1(3);">
<input type="button" value="元に戻す" onclick="Filter1(4);">
</p>
<p>■IE5.5〜の書式で適用する<br>
<input type="button" value="X-Ray(X線)" onclick="Filter2(1);">
<input type="button" value="Grayscale" onclick="Filter2(2);">
<input type="button" value="Invert(色反転)" onclick="Filter2(3);">
<input type="button" value="元に戻す" onclick="Filter2(4);"></p>
</form>