이미지 롤 오버 작업을 하다가 막상 투명이미지를 사용하면 편하겠다 싶어서 gif파일로 만들었지만. 원하는 퀄리티가 안나온다. 그에 따라 png파일로 작업을 하고 웹에서 롤오버를 걸었는데..이게 왠일..ㅡ/.,ㅡ;;
png파일의 알파값 처리가 제대로 안되어서 저렇게 보이는 것이다. ㅡㅡ;;
집컴은 ie7, ff, safari 만 사용하다보니...저런 문제가 있는지 몰랐는데..겜방에서 확인해보니 저런 모양이뜬다;;ㅎㄷㄷ
겜방이 아직 익스6이라는게 참 다행이였다;;거의 대부분 익스6 이겠지만 ㅋㅋ
여튼 모든 웹에서 똑같은 화면이 보이게 하기 위해서 고심을 해서 이미지 배경을 배경색과 동일하게 만들까도 생각했지만..;;
추후에 홈페이지 색 변경이 이루어지면 아이콘을 다시 만들어야 하는 그런 수고를 줄이기 위해서..png파일을 고집하게 되었다. 하지만 알파값 해결을 위해서 서핑과 서핑을 돌아서 찾아낸 소스다.
기존의 XE를 쓸때에는 기본적으로 지원해주는거 같아서 class값만 추가해주면 되던거 같은데..막상 내 홈페이지 만들때
이렇게 하나하나 만들어 줘야 한다는게 좀 글치만..그놈의 익스6 브라우저가 뭔지..
ㅋㅋㅋㅋ
여튼 아래 방법대로 따라 하면 익스6 브라우저에서도 png파일의 알파값을 제대로 표현 해 낼수있게 된다.
IE6 브라우저 PNG 투명 이미지 처리 방법
1. 아래의 자바스크립트를 <head>와 </head> 사이에 넣어주세요.
(js 파일로 따로 만들어서 링크를 거셔도 되고, html 파일 head안에 삽입해도 된다.)
<script language="javascript">
<!--
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>
<!--
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>
2. 역시 아래의 스타일 정의를 <head>와 </head> 사이에 넣어주세요. (물론 style.css 등으로 별도의 css 파일로 만들어도 되지요.)
(html 파일안에 스타일 속성을 지정할때 추가만 해주면 된다. 물론 css파일안에 추가해줘도 상관은 없다.)
<style type="text/css">
.png24 {
tmp:expression(setPng24(this));
}
</style>
.png24 {
tmp:expression(setPng24(this));
}
</style>
3. 그러고 나서 원하는 png 파일을 사용할 때 class="png24" 라고 적어주시면 됩니다.
(투명 이미지로 사용하려는 이미지 파일 링크에 위 스타일 class 네임을 추가해주면 된다.)
<img src="./images/we-want-alpha.png" class="png24">
4. 끝
소스 출처 : http://bones.tistory.com/46
5. 결과물 전 / 후
'--- 나름 웹제작 팁 > JAVASCRIPT' 카테고리의 다른 글
| IE6 브라우저 PNG 투명 이미지 처리 방법 (10) | 2010/01/27 |
|---|---|
| 블로그(티스토리, 텍스트큐브 등) 카테고리 트리 메뉴 구조 항상 펼침 상태 만들기 (6) | 2009/11/27 |
댓글을 달아 주세요
하나의 이미지만 있을때는 해보니까 적용이 되더라구요. 근데 롤오버 이미지 두개다 png 파일일때는 어째야 하나요?? 롤오버에 적용시키니까 투명하게 되긴됬는데.. 오버 이미지로 바뀌지 않아요... 해결책 아시면 알려주심 감사^^;;
흠..ㅡ/.,ㅡ;;
아직 심도깊게 연구를 안해봐서 저도 잘 모르겠네요.
혹시 방법을 아시게 되시면 연락 좀 부탁드립니다;;;
제가 방법을 알게 된다면 연락을 드리겠습니다.
이멜 주소를 안걸어 두셔서 연락이 힘들겠지만;;;연구를 해서라도 방법을 알아내면 댓글과 새로운 글로 방법을 알려드리겠습니다^^
제가 바빠서 그 때가 언제가 될라나 모르겠지만;;ㅎㅎ
여튼 열작하십시요^^
없음니다 익스6에선 png를 롤오버로 쓸 수가 없어요..
2일간 삽질했습니다.
http://webchobo.com/348
위 링크에 최근에 업데이트 된 더 간단한 방법이 있네요.
참고하시길...
기존이미지는 png로 두고 조금 깔끔하지 않더라도 롤오버시의 이미지는 gif로 처리하는 수 밖에 없습니다.
이상 허접 답변이었습니다. ^^;;
감사합니다. 덕분에 골치아픈 녀석을 한방에 깔끔하게 해결했습니다.
익스6은 역시 쓰레기...ㅋㅋㅋㅋㅋㅋ
모두덜 열작!!
익스6은 역시나 개 쓰레기....ㅋㅋㅋㅋㅋㅋ
감사합니다. 다른거 다찾아서 해봐도 안되는데 이걸로 하니까 나오네요..
어제부터 하루종일 머리아팠는데.. 감사합니다.~!!
해결하셨다니 다행이네요.
다만 ie6에서는 롤오버 및 백그라운드로 사용시 제대로 표현이 안되는 일이 발생됩니다.
참고하시길 바랍니다^^;