글
1. JavaScript을 통한 이미지 투명화 시키기
2. <!--[if IE]><![endif]--> 을 이용해서 IE에서만 적용되는 스타일 따로 정의해주기
3. 비헤이버와 CSS의 조합으로 투명화 시키기
.
.
.
1번.
<script>
function fixPNG(obj){
var blankImg = "blank.gif";
var Src, Width, Height;
if ( !(typeof obj.style.filter == 'string' && obj.src.substr(obj.src.lastIndexOf(".")+1).toLowerCase() == 'png') ) return; Src = obj.src;
Width = obj.width;
Height = obj.height; obj.src = blankImg;
obj.width = Width;
obj.height = Height;
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+Src+"', sizingMethod='scale')";
}
</script> <body onLoad="fixPNG(this)">
자바스크립트로 투명도를 주어 작업한 PNG 파일을 웹에서 투명하게 보이게 해줍니다.
접근성의 문제로 그나마 원하는 결과값을 제일 잘 보여준 2번도 보여드립니다.
2번을 사용하는 방법은 간단합니다. <style type="text/css">
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
위 소스는 IE가 아닌 다른 브라우저에서 처리할 부분으로 background 이미지 처리방법은 일반적으로 알고 있는 방법과 동일!
<style type="text/css">
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
<!--[if IE]>
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/01kr/100test/img/common/bg_left_top_logo01.png',sizingMethod='scale'); }
</style>
<![endif]-->
위 소스는 <!--[if IE]><![endif]-->을 이용한 IE 브라우저에서 PNG 이미지의 투명화를 필터로 처리한 방법입니다.
좀 더 설명하자면 "<!--[if IE]><![endif]-->"은 IE 브라우저에서만 적용되도록 해주는 소스코드입니다.
filter 속성 역시 IE에서만 적용됩니다.
위 방법으로 하면 PNG 이미지의 배경 투명화는 간단히 해결됩니다.
"<!--[if IE]><![endif]-->" 방법은 꼭 <head></head> 사이에 정의가 되어야 합니다.
<link> 태그를 넣어서 사용해도 문제 없이 적용됩니다..
하지만 이 방법에도 버그는 있습니다.
<div id="T_L">
<form><input></form>
</div>
위와 같이 투명한 PNG 이미지를 백그라운드로 사용한 레이어(div)에서는 form, input 등이 마우스로 선택이 되지 않습니다. (단, 키보드의 탭키로 이동 가능)
3번입니다.
요기저기 기웃거려서 찾아낸 방법(소스)
<style>
.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>
요렇게 CSS, Javascript를 넣어주고 적용하는 이미지에...class만 추가해주면 된다.
<img src="xxx.png" class="png24">
-----------------------------------------------------------------------------------
그래서 결과적으로 어쩔 수 없이 위와 같은 부분은 <div><img></div> 방식으로 PNG 이미지 파일을 투명화 패치를 따로 해줄 수 밖에 없었습니다.
IE 7 버전에서는 PNG를 잘 적용시켜준다고하니.....
2. <!--[if IE]><![endif]--> 을 이용해서 IE에서만 적용되는 스타일 따로 정의해주기
3. 비헤이버와 CSS의 조합으로 투명화 시키기
.
.
.
1번.
<script>
function fixPNG(obj){
var blankImg = "blank.gif";
var Src, Width, Height;
if ( !(typeof obj.style.filter == 'string' && obj.src.substr(obj.src.lastIndexOf(".")+1).toLowerCase() == 'png') ) return; Src = obj.src;
Width = obj.width;
Height = obj.height; obj.src = blankImg;
obj.width = Width;
obj.height = Height;
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+Src+"', sizingMethod='scale')";
}
</script> <body onLoad="fixPNG(this)">
자바스크립트로 투명도를 주어 작업한 PNG 파일을 웹에서 투명하게 보이게 해줍니다.
접근성의 문제로 그나마 원하는 결과값을 제일 잘 보여준 2번도 보여드립니다.
2번을 사용하는 방법은 간단합니다. <style type="text/css">
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
위 소스는 IE가 아닌 다른 브라우저에서 처리할 부분으로 background 이미지 처리방법은 일반적으로 알고 있는 방법과 동일!
<style type="text/css">
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
background:url(/01kr/100test/img/common/bg_left_top_logo01.png) transparent no-repeat left top;
}
</style>
<!--[if IE]>
#T_L {
position:absolute;
left:0;
top:0;
width:269px;
height:462px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/01kr/100test/img/common/bg_left_top_logo01.png',sizingMethod='scale'); }
</style>
<![endif]-->
위 소스는 <!--[if IE]><![endif]-->을 이용한 IE 브라우저에서 PNG 이미지의 투명화를 필터로 처리한 방법입니다.
좀 더 설명하자면 "<!--[if IE]><![endif]-->"은 IE 브라우저에서만 적용되도록 해주는 소스코드입니다.
filter 속성 역시 IE에서만 적용됩니다.
위 방법으로 하면 PNG 이미지의 배경 투명화는 간단히 해결됩니다.
"<!--[if IE]><![endif]-->" 방법은 꼭 <head></head> 사이에 정의가 되어야 합니다.
<link> 태그를 넣어서 사용해도 문제 없이 적용됩니다..
하지만 이 방법에도 버그는 있습니다.
<div id="T_L">
<form><input></form>
</div>
위와 같이 투명한 PNG 이미지를 백그라운드로 사용한 레이어(div)에서는 form, input 등이 마우스로 선택이 되지 않습니다. (단, 키보드의 탭키로 이동 가능)
3번입니다.
요기저기 기웃거려서 찾아낸 방법(소스)
<style>
.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>
요렇게 CSS, Javascript를 넣어주고 적용하는 이미지에...class만 추가해주면 된다.
<img src="xxx.png" class="png24">
-----------------------------------------------------------------------------------
그래서 결과적으로 어쩔 수 없이 위와 같은 부분은 <div><img></div> 방식으로 PNG 이미지 파일을 투명화 패치를 따로 해줄 수 밖에 없었습니다.
IE 7 버전에서는 PNG를 잘 적용시켜준다고하니.....
'hightag' 카테고리의 다른 글
| ul 활용 하나 (0) | 2008.05.23 |
|---|---|
| 웹 2.0 div 스타일 (레이어) (0) | 2008.05.23 |
| top slide - 상단 open 슬라이드 (0) | 2008.05.23 |
| 네이버 메뉴 스타일 (0) | 2008.05.23 |
| input 힌트레이어 (0) | 2008.05.23 |
| 나만의 태그연습장 만들기 (1) | 2008.03.02 |
| 창닫기,뒤로,앞으로,새로고침 링크소스 (0) | 2008.03.01 |
| 주소표시줄과 북마크에 아이콘넣기 (0) | 2008.02.26 |
| 테이블에 마우스오버 적용하기 (0) | 2008.02.26 |
| 이쁜 셀랙트박스 , 셀렉트박스 꾸미기, selectbox (1) | 2008.02.24 |
RECENT COMMENT