pngFix.js (IE5.5~6에서 PNG이미지를 투명처리)

조회 수 4608 추천 수 0 2010.02.02 11:40:23

IE5.5~6에서는 PNG이미지의 투명처리를 못하죠.

크로스브라우징 목록에 IE6이 포함되어 있으며, 디자인상 png이미지의 사용이 가장 효율적일 때.


사이트 개발시 jQuery를 사용하고 있다면 pngFix.js로 간단히 해결할 수 있습니다.


사용법도 아주 간단하네요.

헤드에 jQuery와 함께 pngFix.js를 같이 불러오고

<script type="text/javascript" src="jquery.pngFix.js"></script> 



document.ready로 pngFix를 활성화 시켜줍니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

원문 및 다운로드 : http://jquery.andreaseberhard.de/pngFix/


profile

소속 : 밀짚모자 해적단

첨부
엮인글 :
http://www.vozzang.net/1039/c3a/trackback
문서 첨부 제한 : 0Byte/ 2.00MB
파일 제한 크기 : 2.00MB (허용 확장자 : *.*)
List of Articles
번호 제목 글쓴이 날짜sort 조회 수

Nivo Slider - 이미지 슬라이더 여러가지 효과 적용 가능 imagefile

  • id: 보짱보짱
  • 2010-07-06
  • 조회 수 1461

Nivo Slider 요 며칠간 jQuery 사용할 일이 있어서 계속 괜찮은 플러그인 없나 검색하다 보니 계속 포스팅 하게 되네요 ^-^ 이번에 소개할 Nivo Slider는 여러가지 전환효과를 갖고 있으며, prev/next 네비게이션 및 썸네...

bxSlider 입니다. imagefile

  • id: 보짱보짱
  • 2010-07-05
  • 조회 수 1333

bxSlider 오랫만에 괜찮은 슬라이더를 발견했습니다. 1. horizontal 과 vertical 방향 설정 가능합니다. 2. 자동 슬라이드 모드가 있습니다. 3. 슬라이드의 플레이/멈춤을 조작할 수 있습니다. 4. 다음/이전 버튼이 있습니다. 5...

jQuery UI Select menu imagefile

  • id: 보짱보짱
  • 2010-07-02
  • 조회 수 1482

jQuery UI Selectmenu jQuery UI를 이용한 셀렉트 입니다. jQuery UI를 이용하기 때문에 좀 묵직한 느낌이 있습니다. 셀렉트 박스만을 위해서 사용하기엔 저로선 좀 내키지가 않는군요;;; 그래도 제작하려는 사이트에서 셀렉트 ...

jQuerylist란 사이트를 아시나요? imagefile

  • id: 보짱보짱
  • 2010-07-02
  • 조회 수 1406

http://jquerylist.com/ 이곳에는 각종 jQuery관련 예제들을 분류별로 모아두었습니다. 한번 둘러보시기를 추천합니다 ^-^

Filterable 입니다. 포트폴리오 리스트에 쓰면 딱!! imagefile

  • id: 보짱보짱
  • 2010-04-13
  • 조회 수 3771

Filterable 리스트 목록 중 분류별로 필터링 해서 보여줍니다. 포트폴리오 리스트에 사용하면 정말 좋을 것 같군요. 이걸 이용해서 한번 만들어 보아야겠습니다 ^-^ HTML <ul id="portfolio"> <li><a href="#"><img src="images/a-lis...

FAQ List

  • id: 보짱보짱
  • 2010-03-31
  • 조회 수 3562

FAQ List FAQ 리스트를 jQuery로 간단하게 만들어 봅시다. 일단 html 마크업은 접근성을 고려하여 dl을 사용하는게 좋을 것 같다는 판단에 dl dt dd로 마크업 합니다. - HTML <dl class="faq"> <dt>Question 1</dt> <dd>Ans...

modal window를 만들어 봅시다.

  • id: 보짱보짱
  • 2010-03-09
  • 조회 수 4681

일반적으로 플러그인으로 나와 있는 라이트박스를 많이 사용합니다. 플러그인을 가져다 붙이기에는 좀 거시기할 때, 간단하게 사용할 수 있는 심플한 modal window 코드를 소개합니다. - HTML <p><a class='activate_modal' name='...

this를 사용한 초간단 롤오버 이미지

  • id: 보짱보짱
  • 2010-03-08
  • 조회 수 5026

this를 사용해서 정말 간단하게 롤오버 이미지를 만들수가 있네요. - jQuery $(function() { $("#menu img").hover(function() { $(this).attr("src", $(this).attr("src").split(".").join("-hover.")); }, function() { $(this).attr("src", ...

디자이너를 위한 jQuery imagefile

  • id: 보짱보짱
  • 2010-03-08
  • 조회 수 4189

디자이너를 위한 jQuery 튜토리얼 입니다. 슬라이드 패널, Accordion, Collapsible 패널 등은 유용하게 사용할 수 있겠군요. 아무래도 여러군데 사용되는 것들이니까요 ^-^ 튜토리얼 보기 : http://www.webdesignerwall.com/tutoria...

.toggle() 이벤트 정리

  • id: 보짱보짱
  • 2010-03-04
  • 조회 수 4471

.toggle() .toggle() 은 어떤 경우에 사용하면 좋을까? 여러 경우가 있겠지만, 레이어의 디스플레이 제어에 가장 많이 사용하지 않을까 생각됩니다. 1. 디스플레이 제어 - jQuery $("a.toggleLink").click(function () { $(".layerBox"...

라이트 박스(lightbox) - ColorBox imagefile

  • id: 보짱보짱
  • 2010-02-23
  • 조회 수 4506

여러 jQuery 라이트 박스 중 다양한 효과와 디자인 스타일을 제공하고 있는 ColorBox 입니다. 꾸준히 업데이트 되고 있기 때문에 버그도 거의 없습니다. 다운로드 및 데모, 설명 : http://colorpowered.com/colorbox/

input text에 포커스 이동시 value 삭제 함수

  • id: 보짱보짱
  • 2010-02-22
  • 조회 수 5211

CLEAR INPUT ON FOCUS FUNCTION input 필드에 포커스 이동시 value값을 지웠다가 나타냈다가 하는 함수 입니다. 로그인 폼이나 검색 폼 등등 여러곳에서 사용할 수 있겠지요. $(document).ready(function() { //attach ...

select box (combo box)에 디자인(css) 입히기 imagefile [2]

  • id: 보짱보짱
  • 2010-02-18
  • 조회 수 5858

개인적으로 셀렉트박스나 체크박스, 라디오 버튼 등 폼관련 엘리먼트들은 기본을 유지하는게 좋다고 생각합니다만, 때때로 클라이언트나 디자이너의 강압에 못이겨 어쩔 수 없이 디자인이나 css를 입혀야 할 경우가 발생합니다. 일단...

정말 심플한 이미지 뷰어 [5]

  • id: 보짱보짱
  • 2010-02-11
  • 조회 수 4622

Simple Image Viewer정말 심플한 이미지 뷰어 입니다. 디자인이야 자유롭게 변경해서 사용하면 될 것 같구요. 슬라이드업 효과때문에 그런지 갤러리보다는 제품이미지 등에 어울릴 것 같군요. Step 1: Create the Mark-up <div ...

배경 이미지 애니메이션 효과 - 메뉴등에 쓰면 좋을 듯 imagefile

  • id: 보짱보짱
  • 2010-02-08
  • 조회 수 4588

배경 이미지 애니메이션 효과 입니다. 메뉴 등에 사용하면 괜찮을 것 같네요. 이미지에 따라서 다양한 효과를 낼 수 있겠네요. 문제는 창의력 -_-;;; 튜토리얼 : http://snook.ca/archives/javascript/jquery-bg-image-animations/ 미리보기...

이미지 및 div 등등 페이드 인/아웃 (fade in/fade out) imagefile

  • id: 보짱보짱
  • 2010-02-03
  • 조회 수 5649

Jquery Fade In.Fade Out이미지나 div 등을 페이드 인/아웃 효과를 줄 수 있습니다. 갤러리 리스트에 적용하면 좀 답답할 것 같고, 최신글 같은 곳에 사용하면 좋을 것 같군요. 과도한 사용은 사이트를 전체적으로 너무 어둡...

슬라이딩 하는 박스와 캡션 imagefile

  • id: 보짱보짱
  • 2010-02-03
  • 조회 수 4701

Sliding Boxes and Captions with jQuery아주 간단하면서 멋진 슬라이딩 애니메이션 효과를 낼 수 있네요. ^-^ jQuery 코드도 간단하기 때문에 다양한 곳에 응용이 가능할 것 같습니다. 데모보기 : https://buildinternet.s3...

pngFix.js (IE5.5~6에서 PNG이미지를 투명처리) file

  • id: 보짱보짱
  • 2010-02-02
  • 조회 수 4608

IE5.5~6에서는 PNG이미지의 투명처리를 못하죠. 크로스브라우징 목록에 IE6이 포함되어 있으며, 디자인상 png이미지의 사용이 가장 효율적일 때. 사이트 개발시 jQuery를 사용하고 있다면 pngFix.js로 간단히 해결할 수 있습니다....

탭 슬라이드 메뉴 imagefile

  • id: 보짱보짱
  • 2010-01-29
  • 조회 수 6747

jQuery 탭 슬라이드 메뉴 입니다. 탭 클릭시 컨텐츠가 슬라이드 되어 나옵니다. 여러모로 유용하게 사용할 수 있을 것 같군요 ^-^ 출처 : http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial 데...

Floating 레이어 (스크롤에 따라다니는.. 주로 퀵메뉴에 사용)

  • id: 보짱보짱
  • 2010-01-29
  • 조회 수 6738

주료 퀵메뉴에 많이 사용하죠. Floating 레이어 입니다. 일단 jQuery 코드는 아래와 같습니다. $(document).ready(function(){ var currentPosition = parseInt($(".floating").css("top")); $(window).scroll(function() { var positi...

XE Login