[php] 태그로 png 투명 이미지 처리하기 > 팁앤테크

• 목록

• 페이스북 공유
• 트위터 공유
• 

일단 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와는 다르게 딜레이가 살짝있죠. ^^

그래도 쓰시는데는 문제없으실껍니다. ^^

추천0