IE6 PNG background없애기
Designer/UX / 2008. 2. 21. 19:10
방법1 : -------------------------------------------------------------------------------------------------------------
<style type="text/css">
.png24 { tmp:expression(setPng24(this)); }
</style>
<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>
<table>
<tr>
<td bgcolor="blue"><img src=left.png class="png24"></td>
</tr>
</table>
방법2 -------------------------------------------------------------------------------------------------------
참조 : http://naradesign.net/wp/2006/12/15/100/
1. img 로 불러올 때
css에서
이렇게 선언하고
js에서
이렇게 선언해 준 후에 사용하는 이미지에 class="png24"를 삽입.
BUT - 페이지를 한 번더 호출하는 경우가 발생 -_-;
2. background-image로 불러올 때
출처 : http://forum.standardmag.org
특수한 경우
필터 먹은 DIV 안에 있는 링크를 아무리 눌러도
클릭이 되지 않는 현상이 생깁니다. (IE-_-신발)
이 특수한 경우는 다음과 같습니다.
필터먹인 DIV
위와 같이 필터먹인 DIV에
position: relative, absolute 설정을 주면
안에 있는 링크는 무용지물이 되고 맙니다.
해결방법
1. 필터 먹인 DIV에는 position: static;
2. 그 안에 들어있는 링크(a)에 relative 혹은 absolute 를 주세요.
<style type="text/css">
.png24 { tmp:expression
</style>
<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>
<table>
<tr>
<td bgcolor="blue"><img src=left.png class="png24"></td>
</tr>
</table>
방법2 -------------------------------------------------------------------------------------------------------
참조 : http://naradesign.net/wp/2006/12/15/100/
1. img 로 불러올 때
css에서
.png24 {
tmp:expression(setPng24(this));
}
이렇게 선언하고
js에서
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 '';
}
이렇게 선언해 준 후에 사용하는 이미지에 class="png24"를 삽입.
BUT - 페이지를 한 번더 호출하는 경우가 발생 -_-;
2. background-image로 불러올 때
background: url(../images/asdf.png) no-repeat center top;
//CSS문서 위치를 중심으로 이미지 경로를 따질것
background-image : none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/asdf.png',sizingMethod='scale');
//실제 읽어들이는 페이지를 중심으로 이미지 경로를 따질것
출처 : http://forum.standardmag.org
특수한 경우
필터 먹은 DIV 안에 있는 링크를 아무리 눌러도
클릭이 되지 않는 현상이 생깁니다. (IE-_-신발)
이 특수한 경우는 다음과 같습니다.
필터먹인 DIV
div {
position: relative;
// offset 설정이 되어버리는 순간 (absolute 마찬가지)
}
위와 같이 필터먹인 DIV에
position: relative, absolute 설정을 주면
안에 있는 링크는 무용지물이 되고 맙니다.
해결방법
1. 필터 먹인 DIV에는 position: static;
2. 그 안에 들어있는 링크(a)에 relative 혹은 absolute 를 주세요.
'Designer > UX' 카테고리의 다른 글
PhotoshopExpress : 포토샵이 웹으로? (2) | 2008.03.28 |
---|---|
칼라에 대한 고찰 (0) | 2008.02.21 |
favicon 생성기 (0) | 2008.02.21 |
저작권 없는 무료 이미지 사이트 100선 (1) | 2008.02.21 |
한국의 색상 (3) | 2008.02.21 |