[첨부파일수정] PNG 파일 익스6에서 처리하는법 종합 (소스들마다의 버그 해결을위해 3개 스크립트 동시적용) 정보
[첨부파일수정] PNG 파일 익스6에서 처리하는법 종합 (소스들마다의 버그 해결을위해 3개 스크립트 동시적용)첨부파일
본문
unitpngfix.js 다운받으신분들꼐 정말 죄송합니다.
clear.gif 파일을 안올렸었네요... 첨부파일 수정합니다 ㅠ
---------------------------------------------------------------
검색으로 png 핵 소스들을 찾아보면 여러가지가 나옵니다.
근데 다들 한가지씩 문제점이 있더군요...
저는 png 위주로 사이트를 제작하면서 문제가 됐던 점들을 해결하기위해 여러소스를 다 적용해보았습니다.
그리고 아래 3가지 소스들을 상황에 맞게 적용하면서 완성할수 있었습니다.
첫번째 소스는 가장 보편적이고 단순한 소스로 <img src="경로" class="png24"> 이렇게 사용합니다.
배경이미지 png는 적용안됩니다.
두번째 소스는 img 테그와 배경png 모두 적용되긴합니다. 그리고 이미지맵을 사용할 수 있습니다.
<img src="경로" class="unitPng" usemap="#이미지맵">
하지만 배경png 핵으로 사용하였다면 몇가지 문제가 발생합니다.
자식 div 혹은 어떤 엘리먼트가 position:absolute; 속성을 사용한다면 에러가 발생합니다. 또한 li, ul 테그의 css가 제대로 적용되지 않습니다.
그리고 div 안에 <a href=...... 이런 링크 테그가 있다해도 마우스로 클릭할수 없습니다. (마치 z-index:-10 이런식으로 가려진것처럼)
때문에 img 테그와 이미지맵을 사용하실 경우에만 사용 하실것을 권유합니다.
세번째 소스는 배경png 적용가능하고, a 링크 사용가능합니다.
포지셔닝, ul, li 모두 정상작동합니다. 다만 이미지맵 사용 불가능합니다.
이 소스는 스크립트 내부에서 테그를 설정해 일괄 적용합니다.
class="어쩌구" 이런게 필요가 없습니다.
(즉, 이 소스가 가장 강력하고, 쓰기 편하며, 왠만한건 이거 하나로 해결이 되는데 이미지맵만 안됩니다^^)
아래 소스전체 혹은 일부분을 <head></head> 사이에 넣으시고 상황에맞게 사용하세요.
첨부파일 다운로드 받으시고 주석을 달아놓았으니 참고해주세요.
<!--[if lte IE 6]>
<!-- 익스6 png핵 - class명 png24 사용, (img 테그에만 적용함) -->
<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>
<style type="text/css">
<!--
.png24 { tmp:expression(setPng24(this)); }
-->
</style>
<!--
.png24 { tmp:expression(setPng24(this)); }
-->
</style>
<!-- 익스6 png 핵 - class명 unitPng 사용, (img 이미지맵 사용시에 적용, 자식 앱솔루트포지셔닝, ul, li, a 는 사용불가) -->
<script type="text/javascript" src="unitpngfix.js"></script>
<!-- 익스6 png 핵 - (div 내에서 배경png 적용시에 사용, 태그내에 a 링크 사용가능) -->
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('div, .png'); //('div,img,li, .png'); 이런식으로 테그 추가가능
</script>
<![endif]-->
추천
2
2
댓글 4개
감사합니다~ㅎㅎ
한번 해볼게요~ㅎㅎ
한번 해볼게요~ㅎㅎ
감사합니다. 그런데 세번째 팁의 td 태그에 background=""으로 들어간 것때문에 td와 img태그 둘다 써주면
둘중 하나는 잘 안보이는것 같네요
둘중 하나는 잘 안보이는것 같네요
으흠...; 그런가요? 테이블 테그는 거의 사용을 안해서... 테스트를 못해봤네요.
td에 그럼 style="" 이거로 해서 해보셨나요?? 것도안되려나....
근데 3번째 방식은 가끔씩 제대로 안나올 때가 있어요.. 새로고침하거나 페이지 이동하면 다시 잘 나오길래, 익스6이니까 그러려니.. 하고 넘기며살았네요 ㅎㅎ
td에 그럼 style="" 이거로 해서 해보셨나요?? 것도안되려나....
근데 3번째 방식은 가끔씩 제대로 안나올 때가 있어요.. 새로고침하거나 페이지 이동하면 다시 잘 나오길래, 익스6이니까 그러려니.. 하고 넘기며살았네요 ㅎㅎ
ㅎㅎ 네 제가 2번째 소스에서 삽입하는 스크립트랑 같은거네요.
아 저렇게 g4[path]로 경로를 적어주는것도 좋겠군요!
그냥 마이크로소프트에서 익스6 랜더링 패치를 확 해주면 좋지않을까요.. ㅠㅠ
걔내라면 얼마든지 가능할텐데..... ㅠㅠ
아 저렇게 g4[path]로 경로를 적어주는것도 좋겠군요!
그냥 마이크로소프트에서 익스6 랜더링 패치를 확 해주면 좋지않을까요.. ㅠㅠ
걔내라면 얼마든지 가능할텐데..... ㅠㅠ
