■次の文字列は各フィルタを適用したもの。
左右反転［左右反転］
上下反転［上下反転］
左右上下反転［左右上下反転］
Filter
左右反転の書式
- (HTML)
(IE4〜)<ELEMENT style ="filter:flipH()">
(IE5.5〜)<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1)">
- (Script)
(IE4〜)object.style.filter = "flipH()";
(IE5.5〜)object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
上下反転の書式
- (HTML)
(IE4〜)<ELEMENT style ="filter:flipV()">
(IE5.5〜)<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1)">
- (Script)
(IE4〜)object.style.filter = "flipV()";
(IE5.5〜)object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1)";
上下左右反転
- (HTML)
(IE4〜)<ELEMENT style ="filter:flipH flipV">
(IE5.5〜)<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)">
- (Script)
(IE4〜)object.style.filter = "flipH() flipV()";
(IE5.5〜)object.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function Filter1(n){ //IE4〜対応の書式
if(n==1)dv.style.filter = "fliph()";
if(n==2)dv.style.filter = "flipv()";
if(n==3)dv.style.filter = "fliph() flipv()"; //同時に2つのﾌｨﾙﾀを設定
}
function Filter2(n){ //IE5.5〜対応の書式
if(n==1)dv.style.filter="progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
if(n==2)dv.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
if(n==3)dv.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
}
//--></script>
</head>
<body>
■次の文字列は各ﾌｨﾙﾀを適用したもの。
<p>左右反転<span STYLE="width:150;font-size:18pt;color:blue;filter:flipH">［左右反転］</span><br>
上下反転<span STYLE="width:150;font-size:18pt;color:red;filter:flipV">［上下反転］</span><br>
左右上下反転<span STYLE="width:200;font-size:18pt;color:magenta;filter:flipH flipV">［左右上下反転］</span></p
<hr>
<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 name="form1">
■次のﾎﾞﾀﾝで各フィルタ効果を適用します(IE4以上に対応)。<br>
<input type="button" value="FlipH(左右反転)" onclick="Filter1(1)">
<input type="button" value="FlipV(上下反転)" onclick="Filter1(2)">
<input type="button" value="左右上下反転" onclick="Filter1(3)">
<input type="button" value="フィルタの解除" onClick="dv.style.filter='';"><br><br>
■IE5.5〜で書式が変更になった。以下のボタンはIE5.5〜に対応<br>
<input type="button" value="左右反転" onclick="Filter2(1)">
<input type="button" value="上下反転" onclick="Filter2(2)">
<input type="button" value="左右上下反転" onclick="Filter2(3)">
<input type="button" value="フィルタの解除" onClick="dv.style.filter='';">
</form>