반응형
오늘 달인쿠폰(http://dalincoupon.com/) 커밍순 페이지를 추가하는 작업을 했습니다.
달인 김병만씨 사진을 PNG로 투명하게 가운데 보이도록 설정하고 배경이미지를 추가 했더니 IE6 브라우저에서 투명 처리 부분이 하늘색으로 보이는 것입니다.
아직은 IE6 이용자가 많다보니 그냥 놔두기엔 아닌것 같더군요.
그렇다고 Gif 파일로 투명하게 하자니 색상이 256이라 김병만씨 사진이 이상하게 되더군요.
자료를 찾아보니 역시나 답은 있더군요.
자바스크립트와 스타일 소스 조금 추가해서 해결하면 되더군요.
먼저 <head>와 </head> 사이에 다음과 같은 소스를 추가 합니다.
1. 자바스크립트 소스
<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>
<!--
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>
자바스크립트 소스는 스크립트 파일로 따로 분리 하셔도 상관 없습니다.
2. Style 소스
<style type="text/css">
.png24 {
tmp:expression(setPng24(this));
}
</style>
.png24 {
tmp:expression(setPng24(this));
}
</style>
Style소스 역시 Style 파일에 추가하셔도 상관 없구요.
이제 적용할 이미지에 클래스명을 지정해 줍니다.
<img src="main.png" border="0" class="png24">
그럼, 이제 정상적으로 배경이미지가 나올겁니다.
참고로, 달인쿠폰은 소셜커머스 사이트 입니다.
대박 사이트가 곧 오픈 예정입니다.
▶ 최신영화, 최신 미국드라마 무료 다운로드...
반응형
'웹프로그램' 카테고리의 다른 글
| 자바스크립트를 이용해서 여러장의 이미지 롤링하기 (0) | 2010.12.24 |
|---|---|
| 자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용 (0) | 2010.12.22 |
| input 입력시 한글만 입력 되도록 또는 영문만 입력 되도록 자바스크립트 제한 (0) | 2010.12.21 |
| 유투브 동영상 블로그에 등록후 접속시 바로 시작 되도록 적용 (0) | 2010.12.03 |
| input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style (0) | 2010.11.01 |
| input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style (0) | 2010.10.29 |
| 자바스크립트로 토스트 배너 (Toast Banner) 슬라이딩 광고 구현 (0) | 2010.09.28 |
| 자바스크립트에서 숫자 3자리 마다 콤마(,) 삽입 또는 콤마(,) 제거 하기 (0) | 2010.09.01 |