묻고답하기

자바스크립트 왕초보의 질문입니다 --;;;;
IE에선 png-24 알파값을 지원하지 않는 것으로 알고 있었는데 아래 소스를 이용하면 가능하다더군요.
그런데 정작 이 소스를 어떻게 써야되는 건지를 모르겠습니다.;;;;

JavaScript 강좌란의 D3님 글입니다.
=================================================================================================================================================

먼저, 예제입니다.

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

=================================================================================================================================================

만일 01.htm, 01.png(550 * 400px), spacer.gif, png.js를 가지고 한다면 이 소스에 어떻게 대입을 해야되는건지 좀 알려주세요. ^-^;



글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
홍순 게시판에 따른 서브메뉴 include...  
안민 로그인 화면 수정중입니다. 고린버튼을 이미지로 바꾸는 방법이  
박재현 서브 메뉴 만드는 방법 질문합니다... [1] 2007.08.10
방인성 index.html 에 gif(움직이는 아이콘)이 새로운 창으로 뛰운 링크를 누르면 움직임이 멎어버려요  
김민규 service명령어에 대한 질문이요  
이은효 "브라우저 윈도우 열기" 관한 질문입니다. [1] 2007.08.10
이재철 스크립트에서 오류가 발생하였습니다.  
장윤희 고수님들..제발갈켜주세요..메일보내는건데... [1] 2007.08.10
박성환 제가 공유기 사용해서 컴터 2대 연결하고 있는데요.. [2] 2007.08.10
greengas 아래 그림처럼 글씨가 다음 칸으로 넘어가 버립니다. 글꼴 문제인지..화면 설정 문제인지를 고수님들 부탁드립니다. [2] 2007.08.10
인자기 에러로그를 브라우저로 불러오려면... [2] 2007.08.10
밥아저씨 안녕하세요, 도움부탁 드립니다. ㅠㅠ [1] 2007.08.10
강정모 외국에서 제 홈페이지를 들어올때 글자가 깨진다고 하네요. [1] 2007.08.10
질문맨 2개의 계정 고민.. [1] 2007.08.10
김대수 TextArea에서 한줄띄움을 하려면? [1] 2007.08.10
솔방울 메인화면 로딩이 느려졌을 때.. [1] 2007.08.10
샤크-김정석 제로보드의 레이어에서 회원정보보기 창의 순위 [1] 2007.08.10
알까 익스플로어 창을 항상위에 놓을수있는 소스인데...  
최준묵 마우스를 올리면 선명해지는 메뉴를...  
김영은 폰트 지정에 관하여 [2] 2007.08.10
김동준 php에 플래시 무비 로드  
나혜진 체크박스에 스타일 시트 적용하는 방법? [5] 2007.08.10
박상일 프레임 세개 설정하고 가운데 메인프레임에 랜덤 사진 띄우는법?? [1] 2007.08.10
nysanyx 노프레임 배경음악... [2] 2007.08.10
박소연 제로보드 계정 및 DB백업 관련, *.frm, *.MYI, *.MYD [2] 2007.08.10
김석구 이미지를 비율에 맞게 줄이는 방법? [1] 2007.08.10
이윤호 줄자처럼 크기를 재주는 프로그램? [1] 2007.08.10
박민규 메뉴를 원하는 시간에 띄울수 있는방법이 있을까요? [2] 2007.08.10
{소유} 키코드 핫키.. 갤러리 방향키이용  
이종호 png-24 알파값 로딩에 대해