左が原画像です。
左の画像を［均一に透明にする］
左の画像を［線状(style=1)に透明にする]
左の画像を［放射状(style=2)に透明にする］
左の画像を［元の原画像に戻す］
左のメニューをクリックして写真の透明度を変更できます。
･★IE5.5以降、以下の書式に変更されています。
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
.aaa {width:150;background-color:darkgray;color:red;cursor:hand;filter:alpha(opacity=100,enabled=1);}
--></style>
<script language="JavaScript"><!--
function FilAlpha(n){
if(n == 1)PIC.style.filter = "alpha(opacity=30,enabled=1)";
if(n == 2){
PIC.style.filter = "alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=80,finishy=80)";
}
if(n == 3){
PIC.style.filter = "alpha(opacity=0,finishopacity=100,style=2)";
}
}
function FilOff(){
PIC.filters(0).enabled = false; //ﾌｨﾙﾀを無効にする
}
function OverAlpha(el){
el.filters.alpha.opacity = 80;
}
function ClickAlpha(el,op){
el.filters.alpha.opacity = 40;
PIC.style.filter = "alpha"; //Alphaﾌｲﾙﾀを適用する
PIC.filters.alpha.enabled = true; //Alphaﾌｲﾙﾀを有効にする
PIC.filters.alpha.opacity = op; //透明度を引数opから
}
function AlphaOff(el){ //文字列の透明度を無くす
el.filters.alpha.opacity = 100;
}
flg = true;
function NewAlpha(){ //IE5.5以降の書式を使った場合
if(flg){
PIC.style.filter = "progid:DXImageTransform.Microsoft.Alpha
(opacity=0,finishopacity=100,style=1,startx=10,starty=10,finishx=70,finishy=70)";
bt.innerText = "Alphaフィルタを解除します";
flg = false;
}else{
PIC.style.filter = "progid:DXImageTransform.Microsoft.Alpha(enabled=0)";
bt.innerText = "上の写真の透明度を30に(放射状ｽﾀｲﾙ)";
flg = true;
}
}
//--></script>
</head>
<body>
<img ID="PIC" STYLE="float:left" src="../../java/jadata/pho_003.gif"
align="texttop" WIDTH="256" HEIGHT="192">左が原画像です。
<p>左の画像を<span style="color:blue;cursor:hand" onclick="FilAlpha(1);">
［均一に透明にする］</span></p>
<p>左の画像を<span style="color:blue;cursor:hand" onclick="FilAlpha(2);">
［線状(style=1)に透明にする］</span></p>
<p>左の画像を<span style="color:blue;cursor:hand" onclick="FilAlpha(3);">
［放射状(style=2)に透明にする］</span></p>
<p>左の画像を<span style="color:blue;cursor:hand" onclick="FilOff();">
［元の原画像に戻す］</span></p>
<div style="float:left;width:150;border:solid blue 2px;">
<div class="aaa" onmouseover="OverAlpha(this);"onclick="ClickAlpha(this,20);"
onmouseout="AlphaOff(this)";><p>透明度を20に</p></div>
<div class="aaa" onmouseover="OverAlpha(this);"onclick="ClickAlpha(this,40);"
onmouseout="AlphaOff(this)";><p>透明度を40に</p></div>
<div class="aaa" onmouseover="OverAlpha(this);" onclick="ClickAlpha(this,70);"
onmouseout="AlphaOff(this)";><p>透明度を70に</p></div>
<div class="aaa" onmouseover="OverAlpha(this);" onclick="ClickAlpha(this,100);"
onmouseout="AlphaOff(this)" ;><p>元の原画像に戻す</p></div>
</div>
･★IE5.5以降、以下の書式に変更されています。
(使用例)
<button id="bt" onclick="NewAlpha()">上の写真の透明度を30に(放射状ｽﾀｲﾙ)</button>
end(最終更新:12/11/10)