KoXo 자바스크립트 - 필터(filter)

개체의 내용을 위로 띄우는 것 처럼되고 그림자가 나타나는 효과를 생성하여 표현한다.

애트리뷰트	속성	설명
color	Color	필터에 적용되는 색상값을 반환하거나 설정한다.
enabled	Enabled	필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
OffX	OffX	그늘진 효과를 나타내는 수평 오프셋트 거리를 픽셀단위로 반환하거나 설정한다.
OffY	OffY	그늘진 효과를 나타내는 수직 오프셋트 거리를 픽셀단위로 반환하거나 설정한다.
Positive	Positive	개체의 투명부분에서 그늘진 효과를 낼 것인가를 부울값으로 반환하거나 설정한다.

애트리뷰트

속성

설명

color

Color

필터에 적용되는 색상값을 반환하거나 설정한다.

enabled

Enabled

필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능

OffX

그늘진 효과를 나타내는 수평 오프셋트 거리를 픽셀단위로 반환하거나 설정한다.

OffY

그늘진 효과를 나타내는 수직 오프셋트 거리를 픽셀단위로 반환하거나 설정한다.

Positive

개체의 투명부분에서 그늘진 효과를 낼 것인가를 부울값으로 반환하거나 설정한다.

와 문자열

필터 표시창

<SCRIPT>
aColors=new Array('pink','red','yellow','aqua','green','blue','brown','teal');
Bidx=0;
function doPlay(job){
  if (!job) divObj.filters[0].Enabled=false;
  else {
    divObj.filters[0].Enabled=true;
    if (job==2){
      if (divObj.filters[0].Positive) divObj.filters[0].Positive=false
      else divObj.filters[0].Positive=true;
    } else if (job==3) divObj.filters[0].Color=aColors[++Bidx%aColors.length];
  }
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='divObj.filters[0].Enabled=('+divObj.filters.item(0).Enabled+'), ';
  str+='divObj.filters[0].Positive=('+divObj.filters[0].Positive+')<BR>';
  str+='divObj.filters[0].OffX=('+divObj.filters[0].OffX+') divObj.filters[0].OffY='+divObj.filters[0].OffY+'),<BR>';
  str+='divObj.filters[0].Color=('+divObj.filters[0].Color+'), ';
  str+='divObj.style.color=('+divObj.style.color+')<BR>';
  show.innerHTML=str;
}
</SCRIPT>
<STYLE>.butClass{width:120;background:afa;color:blue;padding-top:4}</STYLE>
<DIV id="divObj" style="width:460;font-size:50;line-height:1.2em;font-weight:bold;color:blue;padding:20;
  filter:DropShadow(Positive=true,OffX=10,OffY=10)" ><IMG src='http://trio.co.kr/gif/triov.jpg'>와 문자열
</DIV>

<BUTTON onclick="doPlay(0)" class="butClass">정상 이미지</BUTTON>
<BUTTON onclick="doPlay(1)" class="butClass">필터 효과</BUTTON>
<BUTTON onclick="doPlay(2)" class="butClass">Positive 전환</BUTTON>
<BUTTON onclick="doPlay(3)" class="butClass">Color 변화</BUTTON><BR>
<DIV id=show style="width:480;height:70;border:solid 1 blue;padding:3">필터 표시창</DIV>

Script	object.style.filter='{progid:DXImageTransform.Microsoft.]DropShadow(propVal)'
HTML	<ELEMENT style="filter:{progid:DXImageTransform.Microsoft.]dropshadow(propVal)">

DIV에서 document.write(fileName)DropShadow 필터 속성 예제

DIV에서 DropShadow 필터 속성 예제