최근 웹 작업을 하면서 한가지 문제점에 봉착하게 되었습니다.
다름 아닌 png파일 문제였는데 이게 익스 7이나 오페라, 파이어폭스에선 잘보이지만
익스6 이하 버전에서는 투명값이 지원이 안되는 문제였지요.
고생끝에 자바스크립트로 처리가 가능하다는 걸 알게 되었습니다.
자바스크립트로 처리하는 방법은 2가지가 있습니다.
1. 일반적인 img 태그에 css 형식으로 처리
2. 개체에 직접 필터스크립트를 이용하여 이미지 호출
보통 1번 방법은 검색해보면 나옵니다만 다시 한번 언급해봅니다.
사전 자바스크립트 코드 : <head> 와 </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>
-------------------------------------------------------------------
css 코드
-------------------------------------------------------------------
<style type="text/css">
.png24 {
tmp:expression
}
-------------------------------------------------------------------
위와 같이 정의 후에 img태그에 직접 class를 정의해주면 됩니다.
2. 개체에 직접 필터코드를 삽입하는 방법
이 방법은 일단 배경식으로 사용가능합니다만 중복이 안되고 또 위치 조정도 안됩니다.
무조건 상단 왼쪽에 위치 한다고 보시면 될겁니다. ^^;
형식
<태그명 style="filter:progid:DXImageTransform.Microsoft.alphaimageloader(enabled=X, sizingMethod=Y, src='이미지파일 경로');">
X : enabled 는 해당 필터를 동작시키냐 시키지 않냐를 판단하는 함수입니다.
true, 또는 false 값을 넣어주면 됩니다. 기본은 true.
Y : sizingMethod 는 해당 이미지를 어떤 방식으로 불러올 것인가를 정의합니다.
다음과 같은 하위 인수값이 있습니다.
1) image : 기본 디폴트 값입니다만, 되도록 사용하시지 않는 것이 좋습니다.
이 값은 이미지의 크기는 그대로 오지만 이미지를 불러오는 해당
개체의 크기 자체를 이미지크기에 강제로 맞추어 버립니다.
2) scale : 이미지를 불러오는 개체의 크기에 맞추어서 이미지를 늘리거나 줄입니다.
3) crop : 제가 추천해드리는 인수값입니다. 개체크기와 이미지 크기 둘다 변화가 없습니다.
다만, 개체크기가 이미지 크기 보다 작을 경우 개체 크기 만큼만 이미지가 보여집니다.
'Life > 공부 이야기' 카테고리의 다른 글
| 조리개우선모드 (0) | 2008.04.30 |
|---|---|
| 포토샵 강좌ː물방울 효과를 내어보자 (0) | 2008.04.30 |
| 혈액형에 대한 상식 (0) | 2008.04.30 |
| 우울증 체크 (0) | 2008.04.30 |
| 지하철 역의 신기한 그림!! (0) | 2008.04.29 |