성공회대학교 민주주의연구소
Join/Login (구)사이트     KO   EN
Democracy and Social Movements Institute (DaSM)
학교 민주시민교육
정책중점연구소
연구소 소개
연구사업
연구성과 및 활동
자료실
게시판
일정표
연구소 소개
설립목적 연혁 주요사업 연구수행 현황 조직도 구성원 찾아오시는 길
연구사업
중점 연구과제 새마을 운동 연구 연구협동조합 '데모스' 세미나 '일과 사람'
연구성과 및 활동
연구총서 연구보고서 학술행사 연구원 칼럼
자료실
학술행사 자료집
(연구소)
기타 행사 및 자료 기고 및 강연자료 젠더센터
게시판
공지사항 자유게시판 관련연구동향
일정표
일정표
게시판
공지사항
자유게시판
관련연구동향

자유게시판

IE 이미지 필터
ㄹㅇㄴㅁ
2016-04-02 23:33:39
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>
덧글
Name Memo Date 작성
no Title Name Date hit file
* 공포는 서서히~ 충격-패닉-진정or회유-분석,대안-실망-공포-추락 16.02.05 226
> IE 이미지 필터

ㄹㅇㄴㅁ 16.04.02 386
10 새글

비즈애플 16.03.26 119
9   새글

비즈애플 16.12.22 82
8   새글

fdsa 16.12.22 93
7 공포는 서서히~ 충격-패닉-진정or회유-분석,대안-실망-공포-추락

헬스학회 16.02.05 226
6 PHP 함수 레퍼런스

fdsa 14.01.25 784 1
5 문간에 발 들여놓기 기법. 작은 부탁으로 일단 승낙을 얻으면 큰 부탁

13.04.17 268
4 행동수정: 행위규정, 관찰과기록, 강화or약화, 혐오 or 처벌

13.04.17 154
 1   2   




성공회대학교 민주주의연구소   www.democracy.or.kr
About / Contact / 개인정보처리방침 / 📩 eMail
서울특별시 구로구 연동로 320 성공회대학교 일만관 402호 (구주소: 항동 1-1)
Tel 02-2610-4723 / Fax 02-2610-4296
📩 democracy@skhu.ac.kr
• 사이버NGO 자료관     • 아시아 아카이브
• 민주자료관     • MAINS
• 새마을운동 자료관    
© Democracy and Social Institute (DaSM) ALL RIGHTS RESERVED