HTML :: IE의 이미지필터사용법
익스플로러는 포토샵의 필터와 비슷한 기능을 처리할 수 있는 여러 종류의 필터를 제공합니다. 제공되는 필터는 익스플로러 5.5이상에서만 지원됩니다.
|형식|
FIlter객체.filter.필터종류.속성
style="filters.필터의 종류(속성)"
# Alpha Filter
Alpha필터는 불투명도를 조절하여 흐리하게, 선명하게 효과등을 줄 수 있습니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Alpha(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Alpha(속성)">
|예제|
<IMG SRC="img1.jpg" STYLE="filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0,Style=2,StartX=0, FinishX=100, StartY=0, FinishY=100)">
Alpha필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터가 적용되었는지 여부를 설정합니다.
- FinishOpacity : 필터에 적용된 그라디언트 끝부분의 불투명도를 설정합니다.
- FinishX : 필터에 적용된 그라디언트 끝부분의 x좌표를 설정합니다.
- FinishY : 필터에 적용된 그라디언트 끝부분의 y좌표를 설정합니다.
- Opacity : 불투명도 값을 설정합니다.
- StartX : 그라디언트 효과가 시작되는 지점의 X좌표를 설정합니다.
- StartY : 그라디언트 효과가 시작되는 지점의 Y좌표를 설정합니다.
- Style : 그라디언트 효과의 형태를 설정합니다.
-- 0 : Uniform
-- 1 : Linear
-- 2 : Radial
-- 3 : Rectangular
# BasicImage Filter
객체의 회전, 불투명도, 뒤집기, 흑백전환등의 효과를 주는 필터입니다.
|형식| 객체명.style.filter="progid.DXImageTransform.Microsoft.BasicImage(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.BasicImage(속성)">
|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=1, invert=1, opacity=0.4, rotation=1)">
BasicImage필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터의 동작여부를 설정합니다.
- GrayScale : 객체를 그레이스케일로 보여줍니다.
- invert : RGB색상을 뒤집어 보여줍니다.
- Mask : 객체의 투명한 부분의 마스크값을 설정합니다.
- MaskColor : 객체의 투명마스크 색상을 설정합니다.
- Mirror : 거울에 반사된 모양으로 객체를 설정합니다.
- Opacity : 객체의 불투명도를 설정합니다.
- Rotation : 객체를 회전시켜 줍니다.
-- 1 : 90도
-- 2 : 180도
-- 3 : 270도
- Xray : 객체에 X-레이효고를 줍니다. 색상은 객체에 사용된 RGB의 평균값입니다.
# BlendTrans Filter
BlendTrans필터는 페이드(fade)효과를 줍니다.
|형식| 객체명.style.filter="DXImageTransform.Microsoft.BlendTrans(속성)"
|HTML형식| <태그명 style="filter:DXImageTransform.Microsoft.BlendTrans(속성)">
|예제|
<IMG SRC="img1.jpg" STYLE="width:100%;filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=320) progid:DXImageTransform.Microsoft.Wheel(duration=2);">
BlendTrans필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Duration : 전환효과가 완료될 시간을 설정합니다.
- Enabled : 필터작동여부를 설정합니다.
- Percent : 고정필터 결과 디스플레이의 캡쳐지점을 설정합니다.
- Status : 전환형태를 설정합니다.
# Blur Filter
Blur필터는 번짐효과를 주는 필터입니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Blur(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Blur(속성)">
|예제|
<img src="img1.jpg"border="0"
style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=´2´,
MakeShadow=´False´, ShadowOpacity=´0.5´)">
Blur필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터적용여부를 설정합니다.
- MakeShadow : 그림자 형태로 보여질지 여부를 true나 false로 설정합니다.
- PixelRadius : 픽셀단위로 번짐값을 설정합니다.
- ShadowOpacity : 그림자의 불투명도를 설정합니다.
# Chroma Filter
객체의 특정색상을 투명하게 만들어 줍니다.
|형식| 객체명.style.filter="progid.DXImageTransform.Microsoft.Chroma(속성)"
|HTML형식| <태그명 style="filter.progid:DXImageTransform.Microsoft.Chroma(속성)">
|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Chroma(Color=´#CA8C41´)">
Chroma필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터작동여부를 설정합니다.
- Color : 필터를 적용할 (투명하게 만들)색상을 설정합니다.
# DropShadow Filter
그림자효과를 줍니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.DropShadow(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.DropShadow(속성)">
|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Emboss()">
DropShadow필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Color : 그림자의 색상을 설정합니다.
- Enabled : 필터 동작여부를 설정합니다.
- OffX : 그림자의 x축 간격을 설정합니다.
- OffY : 그림자의 y축 간격을 설정합니다.
- Positive : 불투명한 부분에서도 그림자를 만들어 줄지 여부를 true나 false로 설정합니다.
# Emboss Filter
객체에 올록볼록한 효과를 그레이스케일로 보여줍니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Emboss(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Emboss(속성)">
|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Emboss()">
Emboss필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Bias : 필터가 적용될 객체의 색상요소에 백분율을 추가합니다.
- Enabled : 필터동작여부를 설정합니다.
# Engrave Filter
객체에 흑백모드의 조각효과를 보여줍니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Engrave(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Engrave(속성)">
|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Engrave()">
Engrave필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터동작여부를 설정합니다.
- Bias : 필터가 적용될 객체의 색상요소를 백분율에 추가
# FlipH Filter
객체를 좌우로 뒤집는 효과를 보여줍니다.
|형식| 객체명.style.filter="FlipH()"
|HTML형식| <태그명 style="filter:FlipH()">
FlipH필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터동작여부를 설정합니다.
# FlipV Filter
객체를 상하로 뒤집는 효과를 보여줍니다.
|형식| 객체명.style.filter="FlipV()"
|HTML형식| <태그 style="filter:FlipV()">
|예제| <IMG SRC="img1.jpg" BORDER="0" STYLE="filter:FlipV()">
FlipV필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터의 동작여부를 설정합니다.
# Glow Filter
객체의 외곽에 빛을 만들어 glow필터효과를 나타냅니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Glow(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Glow(속성)">
|예제|
<IMG SRC="img1.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Glow(color=´red´, Strength=´10´)">
Glow필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Color : 빛의 색상값을 설정합니다.
- Enabled : 필터동작여부를 설정합니다.
- Strength : 빛의 크기를 픽셀값으로 설정합니다.
# MaskFilter Filter
객체의 특정부분에 칼라마스크효과를 주어, 특정색상을 투명하게 만들어 줍니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.MaskFilter(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.MaskFilter(속성)">
|예제|
<DIV STYLE="filter:progid:DXImageTransform.Microsoft.MaskFilter(color=blue); height:400px; width: 300px;">
MaskFilter필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Color : 필터가 적용될 색상을 설정합니다.
- Enabled : 필터동작여부를 설정합니다.
# Wave Filter
객체에 파도가 피는 듯한 굴곡효과를 줍니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Wave(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Wave(속성)">
|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Wave(Add=´true´, LightStrength=120, Phase=0, Strength=6, Freq=6)">
Wave필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Add : 원본이미지와 필터이미를 겹쳐 쑬 것인지 여부를 설정합니다.
- Enabled : 필터 동작여부를 설정합니다.
- Freq : 웨이브필터에 의해 생성된 파도의 수를 설정합니다.
- LightStrength : 빛의 강도를 설정합니다.
- Phase : 필터가 시작되는 지점을 설정합니다.
- Strength : 빛의 거리를 픽셀값으로 설정합니다.
# Shadow Filter
객체의 회전, 불투명도, 뒤집기, 흑백전환등의 효과를 주는 필터입니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Shadow(속성)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Shadow(속성)">
|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.Shadow(color=´#0033ff´, Direction=150, Strength=22)">
Shadow필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Color : 그림자의 색상을 설정합니다.
- Direction : 그림자의 각도를 설정합니다.
- Strength : 그림자의 크기를 설정합니다.
- Enabled : 필터 동작 유무를 설정합니다.
# Gray Filter
객체에 그레이스케일 효과를 주는 필터입니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"
|HTML형식|
<태그명 style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)">
|예제|
<IMG SRC="img2.jpg" BORDER="0" STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)">
Gray필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터의 작동여부를 설정합니다.
# Light Filter
객체에 채도, 밝기, 광원효과를 주는 필터입니다.
|형식| 객체명.style.filter="progid:DXImageTransform.Microsoft.Light(sProperties)"
|HTML형식| <태그명 style="filter:progid:DXImageTransform.Microsoft.Light(sProperties)">
Light필터에서 사용할 수 있는 속성은 다음과 같습니다.
- Enabled : 필터의 적용여부를 설정합니다.
* AddCone메서드
|형식| 객체명.filters.item("DXImageTransform.Microsoft.Light").addCone(iX1, iY1, iZ1, iX2, iY2, iRed, iGreen, iBlue, iStrength, iSpread)
- iBlue : 채도의 파란(Blue)성분값, 0에서 255까지 값을 설정합니다.
- iGreen : 채도의 녹색(Green)성분값. 0에서 255까지 값을 설정합니다.
- iRed : 채도의 빨간(Red)성분값. 0에서 255까지 값을 설정합니다.
- iSpread : 객체표면과 광원의 수직위치간 각도를 0에서 90사이의 값으로 설정합니다.
- iStrength : 필터의 강도를 0에서 100까지의 값으로 설정합니다.
- iX1 : 광원의 왼쪽좌표를 설정합니다.
- iX2 : 목표광원의 왼쪽좌표를 설정합니다.
- iY1 : 광원의 위쪽좌표를 설정합니다.
- iY2 : 목표광원의 위쪽좌표를 설정합니다.
- iZ1 : 광원의 Z축레벨을 설정합니다.
|예제|
<HTML>
<STYLE type="text/css">
.LightFilter {
background-color: white;
filter: light();
width: 100px;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
FunctIon Light_Init()
{
var iX2 = LightDiv1.offsetWidth;
var iY2 = LightDiv1.offsetHeight;
LightDiv1.filters[0].addCone(0,0,1,iX2,iY2,0,255,0,20,180);
}
//-->
</SCRIPT>
<BODY onload="Light_Init()">
<TABLE BORDER=0>
<TR>
<TD> <IMG SRC="img1.jpg"> </TD>
<TD> <DIV CLASS="LightFilter" ID="LightDiv1">
<IMG SRC="img1.jpg">
</DIV>
</TD>
</TR>
<TR>
<TD ALIGN="center"> 원본이미지 </TD>
<TD ALIGN="center"> Light 필터 효과를 준 이미지 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
----------------------------------------------------------------------------------------
이미지에 마우스를 위치하면 페이드인(Fade in), 페이드 아웃(Fade out)효과를 줍니다.
----------------------------------------------------------------------------------------
<html>
<script language="JavaScript">
<!--
var start_opacity = 30; // 기본 불투명도
FunctIon imgFade(direct) {
if (window.timer) {
clearInterval(timer);
}
dct = direct;
timer = setInterval("flow_filter()", 5);
}
FunctIon flow_filter() {
var imgFilter = img1.filters.alpha;
if (dct == 1) {
if (imgFilter.opacity < 100)
imgFilter.opacity += 10;
else
clearInterval(timer);
} else {
if (imgFilter.opacity > start_opacity)
imgFilter.opacity -= 10;
else
clearInterval(timer);
}
}
-->
</script>
<body>
<img name="img1" src="fight.gif" style="filter:alpha(opacity=30)" onmouseover="imgFade(1)" onmouseout="imgFade(2)">
</body>
</html> |
