sitelink1 | |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars5 | |
extra_vars6 |
다음과 같은 HTML 을 작성하였다.
<DIV style="BORDER-BOTTOM:medium none; FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./IMG/btn_Default.png', sizingMethod='scale'); BORDER-LEFT: medium none; WIDTH: 18px; BACKGROUND-POSITION: 0% 0%; HEIGHT: 18px; BORDER-TOP: medium none; TOP: 0px; CURSOR: default; BORDER-RIGHT: medium none; LEFT: 428px" class=fileitembutton_outer>
<INPUT id="fileinput" style="WIDTH: 18px; HEIGHT: 18px; RIGHT: 0px" class=fileitem_input size=1 type=file>
</DIV>
DXImageTransform.Microsoft.AlphaImageLoader 를 사용하는 이유는 IE8 이하의 IE 브라우저에서 PNG 파일에 대한 투명도를 지정하기 위해서이다. (자세한 내용은 여기 => How to solve/hack fading semi-transparent PNG bug in IE8?)
하지만 filter 를 지정하면서 내부의 file input 을 클릭하지 못하는 버그가 발견되었다. (IE9 에서는 클릭이 된다)
해당 버그로 인해 버튼을 클릭하여 file dialog 를 띄우지 못하게 되었는데 이를 회피하기 위한 코드를 작성하였다.
<html>
<head>
<script type="text/javascript">
function fileClick()
{
var fObj = document.getElementById("fileinput");
fObj.click();
}
</script>
</head>
<body>
<DIV onclick="javascript:fileClick()" style="BORDER-BOTTOM:medium none; FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./IMG/btn_Default.png', sizingMethod='scale'); BORDER-LEFT: medium none; WIDTH: 18px; BACKGROUND-POSITION: 0% 0%; HEIGHT: 18px; BORDER-TOP: medium none; TOP: 0px; CURSOR: default; BORDER-RIGHT: medium none; LEFT: 428px" class=fileitembutton_outer>
<INPUT id="fileinput" style="WIDTH: 18px; HEIGHT: 18px; RIGHT: 0px" class=fileitem_input size=1 type=file>
</DIV>
</body>
</html>
이렇게 하면 투명도도 지정하고 file dialog 도 띄울 수 있다.
단, IE6,7,8 에서만 적용되도록 해야 한다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
65 | Canvas 비트맵 그리기 | 황제낙엽 | 2016.08.22 | 42 |
64 | Canvas 그라디언트 그리기 | 황제낙엽 | 2016.08.22 | 38 |
63 | Canvas 텍스트 그리기 | 황제낙엽 | 2016.08.22 | 20 |
62 | Canvas 곡선 그리기 | 황제낙엽 | 2016.08.22 | 424 |
61 | Canvas 다각형 그리기 | 황제낙엽 | 2016.08.22 | 111 |
60 | Canvas 사각형 그리기 | 황제낙엽 | 2016.08.22 | 30 |
59 | Canvas 시작하기 | 황제낙엽 | 2016.08.22 | 23 |
58 | HTML5 개발을 도와주는 도구들 | 황제낙엽 | 2014.04.04 | 41 |
57 | encoding, charset, code page, UTF-8, UNICODE ... | 황제낙엽 | 2013.08.07 | 731 |
56 | document.domain (from mozilla.org) | 황제낙엽 | 2013.03.13 | 407 |
55 | 우리은행 웹 접근성 가이드 | 황제낙엽 | 2013.03.08 | 86 |
54 | 모든 브라우저에서 동작하는 opacity 설정 코드 | 황제낙엽 | 2013.02.14 | 67 |
» | DXImageTransform.Microsoft.AlphaImageLoader 와 file dialog | 황제낙엽 | 2013.01.28 | 142 |
52 | Gradient 와 Background-Image 동시 적용 방안 | 황제낙엽 | 2013.01.11 | 117 |
51 | 그라디언트와 다중 배경 (gradient) | 황제낙엽 | 2013.01.11 | 52 |
50 | CSS Gradient Background Maker | 황제낙엽 | 2013.01.11 | 25 |
49 | Radius, Gradient, Padding | 황제낙엽 | 2013.01.11 | 74 |
48 | 스타일-보더 테스트 관련 레퍼런스 | 황제낙엽 | 2013.01.04 | 248 |
47 | Vector Markup Language | 황제낙엽 | 2012.12.20 | 28 |
46 | ScrollBar의 출력형태 | 황제낙엽 | 2012.09.14 | 54 |