티스토리 뷰

익스플로러6 버전 이하는 PNG파일의 투명 부분을 회색처리 하죠..
그래서 IE의 필터 기능중 알파로더  DXImageTransform.Microsoft.AlphaImageLoader를 이용해 PNG를 처리합니다.

이게 널리 알려진 방법인데 CSS의 expression까지 사용해가며, class를 주고 CSS와 자바스크립트를 연동해서 사용하는 방법이 가장 널리 알려져 있더군요..

검색엔진에서 setPng24라고 검색해보시면 아실 겁니다..

전 CSS까지 동원하는 건 좀 불필요한 듯 싶어 자바스크립트로만 구현되도록 해봤습니다.

일단 다음과 같이 pngpatch.js라는 스크립트 파일을 하나 만들었습니다.


function setPng24(obj) {
 obj.setAttribute("width","1");
 obj.setAttribute("height","1");
 obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src+"',sizingMethod='image');"
 obj.setAttribute("src",""); 
}

var imgs = document.getElementsByTagName("img");
for(var i =0; i < imgs.length; i++){
    if(imgs[i].src.split(".").pop().toLowerCase() == "png") setPng24(imgs[i]); 
}

그리고 사이트의 footer에 해당 되는 곳에 IE핵을 사용해 다음과 같이 작성해 줬습니다..

<!--[if lte IE 6]>
<script type="text/javascript" language="javascript" src="/js/pngpatch.js"></script>
<![endif]-->

이렇게 하면 IE6이하의 익스플로러에서만 스크립트가 실행 되겠죠? ^^;
나름 혼자만 적용해오던 팁이었습니다.

전 플래시 개발자로 살 운명인데 자꾸 자바스크립트만 올리게 되네요.. 액션스크립트는 아까워서 그런가??  ^^;
조만간 액션스크립트 팁도 올려 보겠습니다.

좋은 하루 되세요 ^^

신고
댓글
  • 프로필사진 Favicon of http://www.ddongkang.com BlogIcon 동강 요즘 IE 땜에 고생을 좀 하고 있어요.ㅠㅎ
    액션 스크립트도 공유해 주세요.ㅋㅋ
    2009.02.04 23:33 신고
  • 프로필사진 Favicon of http://lovedev.tistory.com BlogIcon Kevin lovedev ^^ IE때문에 고생이구나..AS는 이게 팁일까 싶기도 한것들이 너무도 많아서..뭘 공유해야할지 모르겠네..쩝..
    챙피한게지 ㅋ
    2009.02.06 15:54 신고
  • 프로필사진 Q u i c K 좋은 소식 들리던데, 축하드려요.
    막상 같이 일할때는 잘 몰랐는데, 같이 있을때 스크립트 좀 배워둘껄 하는 아쉬움이 드네요.
    스크립트 책 한권 써주세요;;

    건승하시고 건강하시길...
    2009.02.05 13:34 신고
  • 프로필사진 Favicon of http://lovedev.tistory.com BlogIcon Kevin lovedev 대리님도 잘 지내시구요 ^^;
    스크립트는 대리님도 잘하시잖아요 :)
    책을 쓸 실력까지는 ^^;; 무리가..ㅋ

    감사합니다..다른 분들께도 안부 전해주세요 :)
    2009.02.06 15:56 신고
  • 프로필사진 Favicon of http://www.ngshot.com BlogIcon 여초 <style type="text/css">
    <!--

    img {
    border: none;
    }

    /*- Menu--------------------------- */
    #gr {
    float:left;
    width:100%;
    font-size:93%;

    }
    #gr ul {
    margin:0;
    padding:0 0 0 0;
    list-style:none;
    }
    #gr li {
    display:inline;
    margin:0;
    padding:0;
    }
    #gr a {
    float:left;
    background:url("http://www.ngshot.com/menu/left.png";) no-repeat left top;
    margin:0;
    padding:0 0 0 15px;
    text-decoration:none;
    font: bold 12px/1 Arial;
    }
    #gr a span {
    float:left;
    display:block;
    background:url("http://www.ngshot.com/menu/right.png";) no-repeat right top;
    padding:19px 25px 19px 0px;
    color:#FFFFFF;
    font: bold 12px/1 Arial;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #gr a span {float:none;font: bold 12px/1 Arial;}
    /* End IE5-Mac hack */
    #gr a:hover span {
    color:#2b2b2b;
    }
    #gr a:hover {
    background-position:0% -50px;
    }
    #gr a:hover span {
    background-position:100% -50px;
    }
    #gr #current a {
    background-position:0% -50px;
    }
    #gr #current a span {
    background-position:100% -50px;
    color:#2b2b2b;
    }
    -->
    </style>
    </head>

    <body>
    <table width="800" height="50" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.ngshot.com/menu/bar.gif">
    <tr>
    <td width="10"></td>
    <td style='padding-left:10px;'>
    <div id="gr"><ul><!-- CSS Tabs -->
    <!--
    <li id="current"><a href="home"><span><b>처음으로</b></span></a></li>
    강조하고 싶은 그룹에 예제처럼 id="current" 를 넣어주시면 됩니다
    -->
    <li><a href="http://www.ngshot.com/include/profile_p.php"><span><b>Profile</b></span></a></li>
    <li><a href="/bbs/zboard.php?id=cool_g"><span><b>Cool</b></span></a></li>
    <li><a href="/bbs/zboard.php?id=portrait_g"><span><b>Portrait</b></span></a></li>
    <li><a href="/bbs/zboard.php?id=snap_g"><span><b>Snap</b></span></a></li>
    <li><a href="/bbs/zboard.php?id=landscape_g"><span><b>Landscape</b></span></a></li>
    <li><a href="/bbs/zboard.php?id=guest_g"><span><b>Guest Gallery</b></span></a></li>
    <li><a href="/bbs/zboard.php?id=guestbook_b"><span><b>GuestBook</b></span></a></li>
    <li id="current"><a href="http://blog.ngshot.com"><span><b>Bolg</b></span></a></li>
    </ul></div>
    </td>
    </tr>
    </table>
    </body>
    </html>

    염치 없게 이렇게 질문 드립니다.
    메뉴로 사용하는 소스입니다. IE6에서 투명처리가 잘안되는데요.
    어떻게 수정해야 할까요? ;;
    2009.03.01 22:31 신고
  • 프로필사진 Favicon of http://lovedev.tistory.com BlogIcon Kevin lovedev 너무 코멘트를 늦게 봤습니다..

    와...CSS의 강력함을 느낄수 있는 소스군요.
    제가 봤을 때 메뉴 구성을 바꾸지 않는한 이경우 해결책이 딱히 떠오르질 않네요..
    롤오버시에만 적용되는 png는 어려울 듯합니다.

    대안이라면 자바스크립트로 메뉴를 만드면 가능해 보입니다.
    해결해 드리지 못해 미안하네요 어렵게 문의하신 걸텐데..

    좋은 하루 되세요.
    2009.03.11 10:42 신고
댓글쓰기 폼