웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
png-24 포맷 알파값 이미지 로딩하기
2003.04.20 15:15
먼저, 예제입니다.
http://ezvice.com/bbs/png/png.htm
밑에 있는 세가지 그림은 모두 png파일입니다.
위의 컬러 이름 쓰여져 있는 것을 눌러보세요.
배경이 바뀌면서 png의 알파값도 같이 적용됩니다.
이것을 만드는 법을 소개하겠습니다.
참고로, 원 출처는 http://www.theaqua.com입니다.
스틱스님 홈페이지에 사용되었던 것입니다.
저 "png.htm"파일을 소스로 열어보면 아시다시피,
이 그림을 로딩하는 방법은 모두 "png.js"에 들어가 있습니다.
그럼 png.js를 열어보겠습니다.
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
document.writeln('<style type="text/css">img, input.image { visibility:hidden; } </style>');
window.attachEvent("onload", fnLoadPngs);
}
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
if (itsAllGood && img.src.match(/.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
img.src = "spacer.gif";
}
img.style.visibility = "visible";
}
}
이렇게 되어 있습니다.
여기서 중요한 부분은 몇 되지 않습니다.
바꿔야 할 부분은 거의 없고,
유념해야 할 것은, js를 htm파일에 경로를 제대로 입력하는 것과
끝에서 다섯번째 줄의 spacer.gif,
그리고 로딩하는 png가 꼭 " img src= " 구문으로 로딩되어야 한다는 것입니다.
저 spacer.gif는 가로 사이즈 1, 세로 사이즈 1의 투명한 gif로서,
표현한 png-24의 위를 살포시 덮어주는 역할을 하는데요,
이것 img.src = "images/spacer.gif"; 구문을 없애버리면
알파값이 적용되지 않습니다.
이점 유의하시기 바랍니다.
그러므로, 저 구문의 "spacer.gif"에는
가로 1, 세로 1 사이즈의 투명한 gif파일을 로딩하면 되는 것입니다.
이것만 유념하시면 png-24의 알파값 이미지를 로딩할 수 있습니다.
업로드 #1은, 이 강좌에 사용된 png.js 파일입니다.
모르는 부분이 있으면 코멘트로 어택하시기 바랍니다. (관리자라는 위치상 쪽지로 질문 받을 수 없습니다)
* Nytoner님에 의해서 게시물 이동되었습니다 (2003-04-21 17:21)
출처 : http://www.theaqua.com
http://ezvice.com/bbs/png/png.htm
밑에 있는 세가지 그림은 모두 png파일입니다.
위의 컬러 이름 쓰여져 있는 것을 눌러보세요.
배경이 바뀌면서 png의 알파값도 같이 적용됩니다.
이것을 만드는 법을 소개하겠습니다.
참고로, 원 출처는 http://www.theaqua.com입니다.
스틱스님 홈페이지에 사용되었던 것입니다.
저 "png.htm"파일을 소스로 열어보면 아시다시피,
이 그림을 로딩하는 방법은 모두 "png.js"에 들어가 있습니다.
그럼 png.js를 열어보겠습니다.
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
document.writeln('<style type="text/css">img, input.image { visibility:hidden; } </style>');
window.attachEvent("onload", fnLoadPngs);
}
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
if (itsAllGood && img.src.match(/.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
img.src = "spacer.gif";
}
img.style.visibility = "visible";
}
}
이렇게 되어 있습니다.
여기서 중요한 부분은 몇 되지 않습니다.
바꿔야 할 부분은 거의 없고,
유념해야 할 것은, js를 htm파일에 경로를 제대로 입력하는 것과
끝에서 다섯번째 줄의 spacer.gif,
그리고 로딩하는 png가 꼭 " img src= " 구문으로 로딩되어야 한다는 것입니다.
저 spacer.gif는 가로 사이즈 1, 세로 사이즈 1의 투명한 gif로서,
표현한 png-24의 위를 살포시 덮어주는 역할을 하는데요,
이것 img.src = "images/spacer.gif"; 구문을 없애버리면
알파값이 적용되지 않습니다.
이점 유의하시기 바랍니다.
그러므로, 저 구문의 "spacer.gif"에는
가로 1, 세로 1 사이즈의 투명한 gif파일을 로딩하면 되는 것입니다.
이것만 유념하시면 png-24의 알파값 이미지를 로딩할 수 있습니다.
업로드 #1은, 이 강좌에 사용된 png.js 파일입니다.
모르는 부분이 있으면 코멘트로 어택하시기 바랍니다. (관리자라는 위치상 쪽지로 질문 받을 수 없습니다)
* Nytoner님에 의해서 게시물 이동되었습니다 (2003-04-21 17:21)
출처 : http://www.theaqua.com
댓글 9
-
TheMics
2003.04.20 16:29
;ㅁ;결국 올렸군; -
TheMics
2003.04.20 16:29
그런데말야;자바스크립트 자료 아닐까; -
DearMai
2003.04.20 21:54
자바스크립트와 CSS 속성을 둘다 가진듯 ;ㅁ; -
Nytoner
2003.04.21 07:34
저도 어디로 옮겨야 할지 몰랐는데; 그냥 놔둬도 되겠네요;; CSS 속성을 가졌다면.. -
K i o r i a
2003.04.21 11:41
100% 자바 스크립트 입니다. 코딩 안에 들어가있는 CSS는 그냥 익스플로러면은 정해져있는 CSS를 쓰라는뜻. -
nxtyle
2003.04.21 12:55
그럼 PNG의 호환성[알파값이나..]을 높이는 자바라고 보면되나요?;;; -
nxtyle
2003.04.21 12:59
재밌는건...마우스 오른쪽 클릭해서 등록정보를 보면...크기는 png파일의 크긴데 파일 자체는 spacer.gif내요;;;음...자바스크립트는 이래서 무한하다는건가;;; -
styx
2003.04.21 17:06
소스를 보다가... 어째 내 소스같다라고 생각하고 다시 훑어보니;; ㅡㅡ;; -
가울이
2003.04.23 16:21
앗; 유명인사 납시오~
제목 | 글쓴이 | 날짜 |
---|---|---|
[PHP 동영상강좌] 14. 여러개의 파일을 거쳐서 값전달하기 [7] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 13. IF문을 이용한 수우미양가 출력하기 [10] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 12. IF문의 사용 [6] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 11. 메일 발송하기 [16] | 서기 | 2005.11.23 |
[PHP 동영상강좌] 10. 그외의 form관련 태그들 [16] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 9. form태그를 이용한 값의 전달 [15] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 8. Get방식의 전달과 테이블, 스타일태그의 사용 [13] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 7. Get방식을 이용한 변수의 전달 [12] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 6. Hello PHP [14] | 서기 | 2005.11.22 |
[PHP 동영상강좌] 5. 웹서버/웹브라우져/PHP란 무엇인가 [12] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 4. 스타일 시트 [17] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 3. 테이블 태그의 심화 [10] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 2. 하이퍼링크, 테이블태그의 사용방법 [15] | 서기 | 2005.11.17 |
[PHP 동영상강좌] 1. HTML이란 무엇인가! [22] | 서기 | 2005.11.17 |
주민등록번호 진위확인 [5] | 엔시™ | 2005.11.08 |
예전에 책원고로 만들었던것인데 필요한분 사용하세요 [7] | 유창화 | 2005.10.22 |
이쁜 달력소스입니다. [2] | 최문혁 | 2005.09.05 |
자기계정에서 file()가 잘안될때.... [5] | 이진환님 | 2005.08.18 |
일년치 달력을 한꺼번에 보자!!! [4] | 未淚 | 2005.08.07 |
효율적인 경로 지정하기 [9] | 대류 | 2005.07.27 |