이미지 롤 오버 작업을 하다가 막상 투명이미지를 사용하면 편하겠다 싶어서 gif파일로 만들었지만. 원하는 퀄리티가 안나온다. 그에 따라 png파일로 작업을 하고 웹에서 롤오버를 걸었는데..이게 왠일..ㅡ/.,ㅡ;;
png파일의 알파값 처리가 제대로 안되어서 저렇게 보이는 것이다. ㅡㅡ;;
집컴은 ie7, ff, safari 만 사용하다보니...저런 문제가 있는지 몰랐는데..겜방에서 확인해보니 저런 모양이뜬다;;ㅎㄷㄷ
겜방이 아직 익스6이라는게 참 다행이였다;;거의 대부분 익스6 이겠지만 ㅋㅋ
여튼 모든 웹에서 똑같은 화면이 보이게 하기 위해서 고심을 해서 이미지 배경을 배경색과 동일하게 만들까도 생각했지만..;;
추후에 홈페이지 색 변경이 이루어지면 아이콘을 다시 만들어야 하는 그런 수고를 줄이기 위해서..png파일을 고집하게 되었다. 하지만 알파값 해결을 위해서 서핑과 서핑을 돌아서 찾아낸 소스다.
기존의 XE를 쓸때에는 기본적으로 지원해주는거 같아서 class값만 추가해주면 되던거 같은데..막상 내 홈페이지 만들때
이렇게 하나하나 만들어 줘야 한다는게 좀 글치만..그놈의 익스6 브라우저가 뭔지..
ㅋㅋㅋㅋ
여튼 아래 방법대로 따라 하면 익스6 브라우저에서도 png파일의 알파값을 제대로 표현 해 낼수있게 된다.
IE6 브라우저 PNG 투명 이미지 처리 방법
1. 아래의 자바스크립트를 <head>와 </head> 사이에 넣어주세요.
(js 파일로 따로 만들어서 링크를 거셔도 되고, html 파일 head안에 삽입해도 된다.)
2. 역시 아래의 스타일 정의를 <head>와 </head> 사이에 넣어주세요. (물론 style.css 등으로 별도의 css 파일로 만들어도 되지요.)
(html 파일안에 스타일 속성을 지정할때 추가만 해주면 된다. 물론 css파일안에 추가해줘도 상관은 없다.)
3. 그러고 나서 원하는 png 파일을 사용할 때 class="png24" 라고 적어주시면 됩니다.
(투명 이미지로 사용하려는 이미지 파일 링크에 위 스타일 class 네임을 추가해주면 된다.)
4. 끝
소스 출처 : http://bones.tistory.com/46
5. 결과물 전 / 후
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. 결과물 전 / 후
