onclick 이벤트 활용하기와 투명도와 background 활용에 이은 JQuery 활용방법입니다.
----------------------------------------------------------------------------------------------------------------------------------------------
방법1. onclick 이벤트 활용하기
[ CSS ] 파일 첨부시 찾아보기 버튼을 이미지로 대체하기
----------------------------------------------------------------------------------------------------------------------------------------------
방법2. 투명도와 background 활용
[ CSS ] 파일 첨부시 찾아보기 버튼을 이미지로 대체하기
----------------------------------------------------------------------------------------------------------------------------------------------
방법3. JQuery 활용하기 new
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.filestyle.js"></script>
<script language="javascript">
$(function(){
$("input[type=file]").filestyle({
image:"/images/lefttext_03.gif",
imageheight:17,
imagewidth:72,
width:200,
height:15,
color:"red",
border:"1px solid #000000"
});
});
</script>
</head>
<body>
<div style="background:#000000;padding:2px;width:272px;">
<input type="file" name="attachfile">
</div>
</body>
</html>
5,6라인과 같이 jquery-1.4.js 와 jquery.filestyle.js를 사용합니다. (파일첨부)
기존의 jquery.filestyle.js에 약간의 수정이 있습니다.
버튼으로 대체할 이미지 가로/세로 사이즈 외에 텍스트 박스의 속성을 추가했습니다. (13~16라인)
기존엔 텍스트 가로폭인 width가 250으로 고정되어 있었고 height는 기본값을 사용하던 것에 폭,높이, 폰트색상, 테두리색상을 지정할 수 있도록 변경되었습니다.
예제 소스에는 추가된 lineheight, fontfamily, fontsize는 사용하지 않았지만 확장해둔 속성이니 추가설정하면 적용될거구요.
이외에도 얼마든지 확장 가능할듯하네요.
요런 아무 이미지나 대충 버튼으로 사용해봤구요..
이미지 높이가 17인데 박스에 테두리를 줄거여서 height 값은 2픽셀 작은 15입니다.
* 적용 결과 *
IE7
Chrom 5.0
Firefox 3.5.6
Safari 4.0.5
Opera 10.53
이처럼 브라우저별로 별도의 처리를 안해주었지만 거의 동일하게 보이네요.
근데 IE만 좀 이미지가 기어올라가는 현상이 있습니다.
임시방편으로 네*버 검색창처럼 주변을 굵게 처리해서 감췄네요;;
해결방법 아시는 분은 코멘트좀~
글구 IE 다른버젼은.. 멀티 깔았다가 종종 멀쩡한 곳에서 이상한 오류를 내고 지렁인 관계로 지워버려서 테스트 못해봤네요.
혹여 다른 버전에 테스트해보시면 결과는 코멘트로 공유해주는 센스~~
.gif)
퍼가실때 댓글 하나 남겨주신다고 잡아먹지 않습니다~
DEVHolic
miinyx
.gif)
웹개발
