홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
아리랑가요(무료음악채널)
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)
미스트롯(무료음악채널)

온라이브스토어(앱다운로드)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
태그로 png 투명 이미지 처리하기
8년 전
일단 png포맷에 대해서 설명해드리면,

간단히 말해서 반투명한 이미지를 지원합니다.

jpg는 투명이 안되고, gif같은 경우에는 투명은 되지만, 반투명한... 포토샵에서 opacity가 100%가 아닌 부분은 포토샵에서 보던것과는 달리 흰색으로 배경이 채워지고 거기에 반투명한 부분이 들어가는 모습을 보실수 있으실껍니다.

하지만 png포맷은 반투명 알파값을 지원하기 때문에, 마치 포토샵의 레이어 처럼 웹상에서 사용할수 있습니다. 아무렇지도 않게 말이죠.


지금 저 오른쪽 아래에 노란별을 클릭해보세요~ 이 글이 그대로 보이시면서 이미지가 홈페이지위에 덮어지는 모습을 보실수 있으실껍니다. (png이미지 지원하는 링크로 들어오신분이시라면..)

또 아래쪽 별들을 클릭해 배경을 바꿔보세요. 흰색홈페이지 테두리의 그림자 이미지들은 다 그대로 있고 배경만 변하는것이랍니다. 그래도 그림자가 자연스럽게 적용되죠?

별들도 만약 gif라면 테두리가 지저분했을텐데 깔끔하게 적용되구요... 캐비넷에서도 투명한 메뉴를 보실수 있죠..

투명한 플래쉬배경으로도 사용할수 있구요.


하지만 이렇게 아름다운 png이미지는 아쉽게도 익스플로어에서는 곧바로 gif,jpg처럼 적용이 되질 않습니다. 반투명한 부분이 하늘색이나 회색으로 채워지죠.

그래서 별도의 필터를 불러오는 태그를 이용해야하는데요... 바로 이것입니다.



<style>
.png24 {
tmp:expression(setPng24(this));
}
</style>
<!--전반적인 png파일 표시-->
<script>
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src

+"',sizingMethod='image');"
obj.src='';
return '';
}
</script>

요 태그 네이버 블로그에서 퍼온건데 어딘지 모르겠네요; 이걸 head안에 넣어주시고,

이미지 파일을 사용하신다면, 예로..

<img class="png24" src="http://smileru.nasky.net/sixth/images/se/frame_se_15.png" width="37" height="347" alt="">

요렇게 태그안에 class="png24"라고 적어주시면 됩니다. 간단하죠~!

저같은 경우는 이미지의 주소를 풀~경로로 적어주어야 png이미지가 잘 적용되더군요. 어려분도 상대경로로 하셨다가 안되시면 그냥 왕창 다 적어주세요. ^^



이제 또 새로운 문제는 png포맷의 마우스 onover효과입니다. 마우스가 올라오면 이미지가 바뀌게요..

마우스가 올라오면 이미지가 바뀌는 태그로 유명한것이 뭐가 있죠? 그렇죠 그렇죠. 바로 이것입니다.

<img src="images/se/frame_se_22.gif" width="50" height="86" alt="" border=0 onmouseOver="this.src='images/se/frame_se_22o.gif'" onmouseOut="this.src='images/se/frame_se_22.gif'">

가장 간단한 시스템이죠. 하지만 만약 이 태그에 png파일을 적용한다면 어떻게 될까요?

물론 위의 스크립트와 class도 png24로 설정해준 상황에서 말이죠.


결론은 잘 안됩니다. 기본적으로 뜨는 이미지는 알파값이 잘 적용되어 제대로 나오지만,
onover시 뜨게 되어있는 이미지는 점하나로 표시되게 됩니다. 휴우...

제가 그래서 참 애먹었습니다. 그림자가 들어간 링크부분이 있어서 그쪽은 gif나 jpg로 할수가 없었거든요..... 그래서 table태그와 div태그를 이미지 태그로 쓰는 법을 이용했습니다.


<td colspan="2" rowspan="5" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://smileru.nasky.net/sixth/images/se/frame_se_24.png');" onmouseOver="img24.style.visibility='visible'" onmouseOut="img24.style.visibility='hidden'" style="cursor:hand;" onclick="parent.frames['s_main'].location='history.html'">
<div id="img24" style="visibility: hidden" width=37 height=200>
<img class="png24" src="http://smileru.nasky.net/sixth/images/se/frame_se_24o.png" width="37" height="200" alt="" border=0>
</div>


크으으... 복잡하죠? 요게 지금 6thSE에서 오른쪽에 있는 History페이지를 여는데 쓰인태그입니다.

우선 td태그를 분석을 해보면.....


style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://smileru.nasky.net/sixth/images/se/frame_se_24.png');"

요 부분은 테이블의 배경에 png 포맷을 쓰는 소스입니다. 요것도 onover와 무관하게 중요하죠.
아무튼... 위쪽에 png포맷을 적용하는 스크립트를 분석해서 만든 태그랍니다. ^^


onmouseOver="img24.style.visibility='visible'" onmouseOut="img24.style.visibility='hidden'" style="cursor:hand;"

요건 간단한 이벤트입니다. 해당 td테이블에 마우스가 올라오면 img24라는걸 보이게 하고, 마우스가 나가면 감추게 되는것이죠.

또 테이블은 링크가 아니라서 마우스가 그냥 화살표모양으로 뜨기때문에 style에 cursor:hand;도 추가했습니다. ^^


onclick="parent.frames['s_main'].location='history.html'"

이것도 바로 감이 오시죠? 바로 테이블에 링크를 걸어준겁니다. 해당 td를 클릭(onclick)하게되면 프레임이름이 s_main인것에 history.html을 로드하게됩니다. ^^


이제 div태그를 봅시다.

<div id="img24" style="visibility: hidden" width=37 height=200>
<img class="png24" src="http://smileru.nasky.net/sixth/images/se/frame_se_24o.png" width="37" height="200" alt="" border=0>
</div>

이게 바로 img24라는 id를 가진 div이죠. 일단은 안보이게 되어있다가, 윗쪽 td태그에 이벤트에 의해 테이블쪽에 마우스가 올라오게 되면 요 div가 보이게 되고, 따라서 그 안에있는 이미지가 보이니까 마치 onover효과처럼 보이게됩니다.

이 div안에 img태그에 굳이 링크를 걸어주지 않으셔도 됩니다. 이미 td에 전체적으로 걸려있기 때문이죠. 하지만 전 혹시나 해서 실제로는 적어주긴 했습니다. ^^;



이렇게 하면 png이미지의 onover효과도 구현할수 있겠죠? 하지만 단점은 반응속도가 살짝느립니다. 위쪽에서 쓴 기본적인 gif나 jpg의 onover와는 다르게 딜레이가 살짝있죠. ^^

그래도 쓰시는데는 문제없으실껍니다. ^^
추천추천 : 306 추천 목록
번호 제목
3,016
 우클릭 완벽차단 스크립트
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
목록
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
세월따라노래따라
가슴시린트로트
트로트쌍쌍파티
7080추억속으로
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.