js파일 다운로드
<!--[if IE 6]>
<script src="/inc/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->
[example]
<img src="" class="png_bg" alt="" />
이하원본================================================================================================
IE6만 쓰던 시절엔 png투명이미지를 아예 쓸 생각을 하지않았는데, IE6이하를 제외한 거의 모든 브라우저,
심지어 IE조차 7부터는 png24 투명/반투명이미지를 지원하기에 단지 IE6때문에 유용한 png파일 사용을 못하기엔 안타깝다는 생각이 많이 든다.
예전부터 크게 두가지 방법이 있긴 했다.
1. DXImageTransform.Microsoft.AlphaImageLoader어쩌고로 시작하는 방법
배경에는 속성(repeat,position)적용이 안됨, 물론 배경이 아닌 단순한 이미지를 삽입하거나 배경에 repeat과 같은 속성이 필요없을시에는 요긴하게 쓰일수도있다.
2. iepngfix.htc 이런식의 IE전용인 .htc파일을 불러들여 IE에서만 읽고 실행하는 방법.
이방법이 계속 발전해서 투명 png 배경이미지속성까지 제어가 가능한 이곳의 버전2를 사용하기위해서는
기 본적인 .htc파일과 css 배경 속성지원을 위한 .js파일 그리고 blank.gif 라는 작은 투명이미지등이 필요해 약간 귀찮아 보이긴 하지만, .img나 background에 관련된 css속성 지원, 투명png hover지원등 거의 완벽하게 IE6에서 png24투명이미지를 보통의 gif 나 jpg 파일처럼 쓸수있게되었다.
그 런데 문제는 투명이미지의 경우 바로 투명으로 뜨지않고, 일전의 형식(이미지의 투명한 부분이 회색바탕으로 나오는)으로 우선 보였다가 .js 화일을 읽어들이고 나서야 투명이 되기때문에 페이지를 열었을때 깜박이는 fliker 현상이 일어난다는 점.
그리 가볍지도 않은 .js,.htc 파일을 항상 로드해야된다는점 등이 아쉬운점이었다.
위의 두가지 방법외에 몇가지 새로운 소스들이 있어 소개해 본다.
2kb바이트도 채 안되는 자바스크립트 한줄의 추가로 모든것이 해결되는 정말 좋은 소스라고 생각된다.
1: <!--[if lt IE 7]>
2: <script type="text/javascript" src="unitpngfix.js"></script>
3: <![endif]-->
IE filter로 인한 깜박이는 문제(fliker) 해결, 자동으로 페이지 내 모든 투명이미지에 적용, auto width, auto height, background repeat 속성지원등 괜찮은 소스이다.
그러나 간혹 jquery를 이용한 dropdown menu 나 slide toggle 등이 z-index를 이용해 png배경위에 놓였을때 펼쳐지지 않을 때가있음이 발견되었고, background-position은 지원이 되지않는다.
IE6만을 위한 코드이므로 IE5.5 이하의 버전에서는 어찌될지 모르겠다.
우선 원하는 페이지에 적용해보고 이상이 없다면, 현재로선 가장 간단한 방법이 아닌가 싶다.
Achieve alpha transparency in IE6 without the need of an HTTP request
별도의 자바스크립트를 추가하기 원하지 않는 사람들을위해 예전에 사용하던 1번방식이 좀더 발전된 소스라고 보면 되겠다.
1: * html * { behavior: expres\sion( (this.runtimeStyle.behavior = "none")
2: &&
3: (this.currentStyle.backgroundImage.toString().toLowerCase().indexOf('.png')>-1)
4: && ( this.runtimeStyle.filter =
5: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
6: this.currentStyle.backgroundImage.toString().replace('url("','').replace('")','')
7: + "', sizingMethod='crop')", this.runtimeStyle.zoom = 1,
8: this.runtimeStyle.backgroundImage = "none" ) ); }
CSS에 이런식으로 넣어주면 한꺼번에 페이지내 모든 투명 배경이미지를 제어할수있다.
발견된 문제점으로는 투명png 배경이미지가 있는 레이어위에 z-index로 다른 레이어를 얹었을때 그안에 있는 모든 링크나 버튼들이 클릭이 안된다는 점이다.
투명배경위에 링크나 메뉴버튼을 넣을 필요가 없는 경우엔 유용한 소스라고 할수있다.
Jquery plug-in을 이용한 투명이미지 출력방법도 몇가지 있다.
jquery IE6 png transperency fix
해당싸이트에가서 jqPngFix.zip파일을 다운받아 적용한다. 배경은 지원이 되지않으며, 싸이트내 단순 .img 태그에만 적용한다.
jquery.pngFix.js PNG-Transparency
IE 5.5와 6을 지원하며, background에도 png를 적용할수있으나, repeat이나 position속성등은 쓸수없고
예전의 그것과는 약간 다른 느낌의 fliker현상이 발견되었다.
항상 png이미지가 포함되는 요소의 width와 height를 지정 해주어야 한다.
background-position은 지원하나 repeat은 지원이 안된다. 최신 버전에서는 background-position을 퍼센티지로도 지정할수있다.
마지막으로 jquery 플러그인은 아니지만 현재 블로그에 적용하고있는 소스를 소개해본다.
적용했었는데, 텍스트큐브엔 자바스크립트를 업로드 할수없어 다른데서 끌어쓰다가 그냥 없애버렸기때문에 현재 IE6에서는 블로그 투명테두리가 안보이도록 바꿔버렸다.
7kb가량의 자바스크립트를 로드해야되지만(7kb가 무겁다는 얘기는 절대 아니다), 셀랙트박스, 라디오버튼, 이미지hover, javascript animation등에도 자유자재로 png투명이미지를 배경이나 버튼이미지로 넣을수있다.
광범위한 지원과 더불어 개발자의 끊임없는 업데이트도 눈에 띈다.
물론 fliker현상도 없다!
'web standard > script' 카테고리의 다른 글
| 클릭시 특정id의 class변경 (0) | 2011.01.06 |
|---|---|
| 라디오버튼체크시 레이블스타일변경 스크립트 (0) | 2010.11.17 |
| pack된 js unpacker해주는 사이트 (0) | 2010.05.12 |
| 슬라이드쇼+인터벌전환+카테고리연동(ie전용) (0) | 2010.05.04 |
| ie6에서 png파일 처리방법. (0) | 2010.05.03 |
