梅と鶯
FILTER
■現在の設定内容をで↓↓にHTMLソースで
ここにHTMLソースを表示
BasicImageフィルター
- IE4.0の幾つかのFilterが統合され、色処理、イメージ回転、透明度を調節できる。IE5.5〜に対応。
- (HTML書式)
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(各属性を設定)"
>
- (Scripting書式)
object.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(各属性を設定)"
object.filters.item(index番号).属性名 = 設定値;
- (各属性値)
enabled･･･filter機能をon＜1＞／off＜0＞
grayscale･･･グレースケールにしない＜0＞／グレースケールにする＜1＞
xray･･･X線フィルター。off＜0＞／on＜1＞
invert･･･（色反転）対象要素の色相、彩度、明度の値を反転する。ネガ写真のようになる。off＜0＞／on＜1＞
mirror ･･･ミラー、左右反転。off＜0＞／on＜1＞
rotation･･･0(回転無し）／
1(右90度回転) ／ 2(180度回転)／3(左90度回転)
opacity･･･透明度。0-1の範囲の小数で指定。(例)0(完全透明)／0.15、0.3、0.55、0.7、1(完全不透明)
mask･･･マスク。off＜0＞／on＜1＞
maskColor･･･色番号（1〜16777216の範囲の数値を指定）
- (注意)Filterが適用されるには、オブジェクトのstyle設定でabsolute、width、heightのいずれかの設定が必要。
Sample Source......................................................................>>>
<SCRIPT language="JavaScript"><!--
function CheckGray(obj){ //Grayscale
if(obj.checked){
dv.filters.item(0).grayscale=1;
v_gray = 1;
}else{
dv.filters.item(0).grayscale=0;
v_gray = 0;
}
}
function CheckXray(obj){ //Xray
if(obj.checked){
dv.filters.item(0).xray=1;
v_xray = 1;
}else{
dv.filters.item(0).xray=0;
v_xray = 0;
}
}
function CheckInvert(obj){ //Invert(色反転)
if(obj.checked){
dv.filters.item(0).invert=1;
v_invert = 1;
}else{
dv.filters.item(0).invert=0;
v_invert = 0;
}
}
function CheckMirror(obj){ //Mirror(左右反転）
if(obj.checked){
dv.filters.item(0).mirror=1;
v_mirror = 1;
}else{
dv.filters.item(0).mirror=0;
v_mirror = 0;
}
}
function ChangeRotation(r){ //Rotation(回転)
dv.filters.item(0).rotation = r;
v_rot = r;
}
function ChangeOpacity(op){ //Opacity(透明度)
dv.filters.item(0).opacity = op;
v_opa = op;
}
function SetMask(flg){
if(flg){
if(document.form1.mcolor.value != ""){
dv.filters.item(0).mask=1;
dv.filters.item(0).maskColor=document.form1.mcolor.value;
v_mask = 1;
v_mcolor = document.form1.mcolor.value;
}
}else{
dv.filters.item(0).mask=0;
v_mask = 0;
}
}
//--></SCRIPT>
<SCRIPT language="JavaScript"><!--
//このScriptは、現在の設定内容を表示するもの
//･･････ｸﾞﾛｰﾊﾞﾙ変数の宣言と初期値･････････････････････････
var v_gray = 0;
var v_xray = 0;
var v_invert = 0;
var v_mirror = 0;
var v_rot = 0;
var v_opa = 1;
var v_mask = 0;
var v_mcolor = 1;
function PreviewTxt(){
str = '<div id="dv" style="width:310;filter:progid:DXImageTransform.Microsoft.BasicImage(';
str += 'grayscale=' + v_gray;
str += ',xray=' + v_xray;
str += ',invert=' + v_invert;
str += ',mirror=' + v_mirror;
str += ',rotation=' + v_rot;
str += ',opacity=' + v_opa;
str += ',mask=' + v_mask;
str += ',maskColor=' + v_mcolor;
str += ')"><img style="float:left" id="pic" src="../../images/cut/025.gif" width="103" height="116">
<span style="width:200;color:magenta;font:30pt \'ＤＦ勘亭流\'">梅と鶯</span><br>
<span id="sp" style="width:200;color:green;font:30pt \'Broadway BT\'">FILTER</span></div>';
prev.innerText = str;
}
//--></SCRIPT>
</head>
<body>
<form name="form1">
■以下のオプションを選択すれば、即反映する。
<input type="checkbox" value="0" name="gray" onclick="CheckGray(this)">
Grayscale（ｸﾞﾚｰｽｹｰﾙにする)
<input type="checkbox" value="0" name="xray" onclick="CheckXray(this)">
xray(X線ﾌｨﾙﾀｰ様に)
<input type="checkbox" value="0" name="invert" onclick="CheckInvert(this)">
Invert（色反転)
<input type="checkbox" value="0" name="mirror" onclick="CheckMirror(this)">
Mirror(左右反転)<br>
回転--→ <input type="radio" name="rot" value="0" checked
onclick="ChangeRotation(this.value)">0:回転無し
<input type="radio" name="rot" value="1"
onclick="ChangeRotation(this.value)">1:右90度回転
<input type="radio" name="rot" value="2"
onclick="ChangeRotation(this.value)">2:180度回転
<input type="radio" name="rot" value="3"
onclick="ChangeRotation(this.value)">3:左90度回転<br>
透明度--→
<select name="opa" onChange="ChangeOpacity(this.value)">
<option value="1" selected>1:完全不透明</option>
<option value="0.9">0.9</option>
<option value="0.8">0.8</option>
<option value="0.7">0.7</option>
<option value="0.6">0.6</option>
<option value="0.5">0.5:半分透明</option>
<option value="0.4">0.4</option>
<option value="0.3">0.3</option>
<option value="0.2">0.2</option>
<option value="0.1">0.1</option>
<option value="0">0:完全透明</option>
</select>
Mask(マスク)--→
<input type="text" name="mcolor" size="8">番号の色で
<input type="button" value="マスクする" onclick="SetMask(true)">／
<input type="button" value="マスクを解除する" onclick="SetMask(false)">
</form>
<div id="dv" style="width:310;filter:progid:DXImageTransform.Microsoft.BasicImage
(grayscale=0, xray=0,invert=0,mirror=0, rotation=0,opacity=1, mask=0, maskColor=1)">
<img style="float:left" id="pic" src="../../images/cut/025.gif" width="103" height="116">
<span style="width:200;color:magenta;font:30pt 'ＤＦ勘亭流'">梅と鶯</span><br>
<span id="sp" style="width:200;color:green;font:30pt 'Broadway BT'">FILTER</span>
</div>
■現在の設定内容をで↓↓にHTMLソースで<button onclick="PreviewTxt()">表示する</button>
<div id="prev" style="border:1px solid pink;color:navy">ここにHTMLソースを表示</div>