익스플로러의 각종 필터 효과
<html>
<head>
<body>
<div align="center" id=desc><center><h3>필터를 적용하려면 아래 링크를 클릭 해 보세요</h3></center><span id=fcode>현재는 필터가 적용되지 않은 상태 입니다</span></div>
<br><center>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='alpha(opacity=50,)'; desc.innerHTML='Alpha: alters the opacity of an object, allowing it to blend with the background.<br><span id=fcode>filter: alpha(opacity=50)</span>';">alpha</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='blur(direction=45, strength=5, add=0)'; desc.innerHTML='Motion Blur: blurs an object with the direction and strength specified.<br><span id=fcode>filter: blur(direction=45, strength=5, add=0)</span>';">blur</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='dropshadow(offx=-4, offy=3, color=#9cf)'; desc.innerHTML='Drop Shadow: creates a shadow of the object at a specified x-y offset and color.<br><span id=fcode>filter: dropshadow(offx=-4, offy=3, color=#9cf)</span>';">dropShadow</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='fliph()'; desc.innerHTML='Flip Horizontal: flips the visible pixels in the horizontal axis.<br><span id=fcode>filter: fliph()</span>';">flipH</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='flipv()'; desc.innerHTML='Flip Vertical: flips the visible pixels in the vertical axis.<br><span id=fcode>filter: flipv()</span>';">flipV</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='glow(strength=3, color=orange)'; desc.innerHTML='Glow: creates a glow around the opaque pixels of an object.<br><span id=fcode>filter: glow(strength=3, color=orange)</span>';">glow</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='gray()'; desc.innerHTML='Grayscale: converts the visible pixels to 256 shades of gray.<br><span id=fcode>filter: gray()</span>';">gray</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='invert()'; desc.innerHTML='Invert: maps the pixels to their opposite value in the color spectrum.<br><span id=fcode>filter: invert()</span>';">invert</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='mask(color=olive)'; desc.innerHTML='Mask: turns transparent pixels to a specified color and opaque pixels transparent.<br><span id=fcode>filter: mask(color=olive)</span>';">mask</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='shadow(color=silver, direction=135)'; desc.innerHTML='Shadow: creates an attenuated shadow in the direction and color specified.<br><span id=fcode>filter: shadow(color=silver, direction=135)</span>';">shadow</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='wave(freq=4, strength=9, phase=0, lightstrength=0, add=0)'; desc.innerHTML='Wave: applies a sine wave deformation to an object.<br><span id=fcode>filter: wave(freq=4, strength=9, phase=0, lightstrength=0, add=0)</span>';">wave</span>
<span id=flink onmouseover="this.style.color='red'"; onmouseout="this.style.color='0000ff'"; onclick="theImg.style.filter='xray()'; desc.innerHTML='Xray: grayscales and flattens the color depth.<br><span id=fcode>filter: xray()</span>';">xray</a></span></div>
<br>
<div style="width:100%" align="center" id=theImg>
<h4><a href="http://www.gachimoa.com">자바스크립트 소스뱅크 </a></h4>
<a href="http://www.gachimoa.com"><img src="homer.jpg" hspace=10 vspace=10></a><br>
<button onclick="theImg.style.filter=''; desc.innerHTML='링크를 클릭 해 보세요<br><span id=fcode>no filter applied</span>';">Clear Filter</button>
</div>
</body>
</html>
댓글 0
- 전체
- 자유게시판
- 컴퓨터/IT
- 연애/결혼
- 생활지혜/상식
- 홍보팁
- 재테크/카드
- 카페/블로그
- 여행
- 부부생활
- 심리
- 음악/미술
- 법률
- 건강
- 역사
- 인테리어/DIY
- 밀리터리
- 해외직구
- 예능/영화
- 미스테리
- 임신/육아
- 다이어트
- 음식/주방/요리
- 운전/자동차
- 낚시
- 휴대폰
- 운동
- 게임/만화
- 취업/알바/부업
- 사진
- 이사/이민
- 패션/뷰티
- 경제/주식
- 부동산
- 그 외..
| 번호 | 제목 | 글쓴이 |
|---|---|---|
| 3421 | 심장 건강에 좋은 습관 8가지 [1] | 뉴퐁 |
| 3420 | 잠잘 때 왼쪽으로 자면 생기는 신체 변화 7가지 [2] | 뉴퐁 |
| 3419 | 스트레스를 줄이는 놀라운 방법 6가지 [2] | 싹쓰리 |
| 3418 | 여성이 팬티에 대해 알아야 할 7가지 [3] | 싹쓰리 |
| 3417 | 끓였던 물을 또 끓이면 안 되는 이유 [1] | 싹쓰리 |
| 3416 | "치주염 환자, 코로나 감염 땐 사이토카인 폭풍 가능성 높아" [1] | 쌍둥이맘 |
| 3415 | 스마트스토어 상위 노출 꿀팁. 경쟁률 낮은 세부키워드 뽑는 방법 [2] | 나혼자번다 |
| 3414 |
열감지 안면인식 출입관리솔루션 400만원짜리를 40만원에(정부지원사업)
[1]  | 나혼자번다 |
| 3413 | 전자렌지요리 만능 레시피 대공개!! [3] | 나혼자번다 |
| 3412 | 식초로 집안을 반짝반짝하게!! 식초 청소법 [4] | 쌍둥이맘 |
| 3411 | 마시고 남은 김빠진 맥주 활용법 [2] | 쌍둥이맘 |
| 3410 | 계란을 먹은 후 절대 바로 먹으면 안되는 것들 | 쌍둥이맘 |
| 3409 | 아주 유용한 커피상식 | 쌍둥이맘 |
| 3408 | 간 건강과 지방간 완화에 아주 효과적인 채소는? [2] | 싹쓰리 |
| 3407 | 골다공증 예방과 뼈에 아주 좋은 음식 8가지 | 싹쓰리 |
| 3406 | 체했을 때, 감기 걸렸을 때, 관절염 통증에는 이것이 최고!! | 싹쓰리 |
| 3405 | 장을 편안하게 하면서 소화를 돕는 식품 5가지 [1] | 싹쓰리 |
| 3404 | 초보운전자가 반드시 알아야 하는 고속도로 운전매너 5 [1] | 싹쓰리 |
| 3403 | 머리카락이나 두피를 상하게 하는 사소한 습관 5 | 라이믹스 |
| 3402 | 어둡고 칙칙한 피부를 환하게 해주는 필수적인 습관 5 | 라이믹스 |