CSS공통 DXImageTransform.Microsoft.AlphaImageLoader 와 file dialog

황제낙엽 2013.01.28 11:51 조회 수 : 244

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 에서만 적용되도록 해야 한다.

이 게시물을
목록
쓰기 태그