이미지 태그 클릭시 변경
본문
<img src="asdfafd.jpg" onclick="change_img();">
이런식으로해서 이미지를 바꾸려고하는데요
<input type='file'> 하면 파일 선택할수있는 창이 뜨잖아요
onclick으로 할수있는방법이있을까요?
답변 1
아래 소스를 참고해보세요.
input type="file"을 이용하고, css를 조정해 이미지 형태로 둔갑시킵니다.
HTML 코드
<div class="file_input">
<label>
File Attach
<input type="file" onchange="javascript:document.getElementById('file_route').value=this.value">
</label>
<input type="text" readonly="readonly" title="File Route" id="file_route">
</div>
CSS코드
.file_input label {
position:relative;
cursor:pointer;
display:inline-block;
vertical-align:middle;
overflow:hidden;
width:100px;
height:30px;
background:#777;
color:#fff;
text-align:center;
line-height:30px;
}
.file_input label input {
position:absolute;
width:0;
height:0;
overflow:hidden;
}
.file_input input[type=text] {
vertical-align:middle;
display:inline-block;
width:400px;
height:28px;
line-height:28px;
font-size:11px;
padding:0;
border:0;
border:1px solid #777;
}
답변을 작성하시기 전에 로그인 해주세요.
