아래 스크립트는 0~9까지의 버튼이 있고 각 버튼을 누르면 마치 전화번호가 쳐 지듯이 차례대로 번호 부분이 해당이미지(0~9까지의 숫자 이미지)로 바뀌게 하는 스크립트입니다. 이것을 응용한다면 원하는 이미지를 페이지 로딩이 완료된 뒤에도 마음대로 바꿀수 있을 것입니다.
다음을 <HEAD></HEAD> 사이에 넣습니다.
<Script Language="JavaScript">
<!--
var cnt=0
function ch_num(num) {
cnt++
if( cnt==8 ) {
var i;
for( i=0 ; i<7 ; i++ ) {
document.images[i].src = "0.gif"
}
cnt = 0
}
else {
document.images[cnt-1].src = num + ".gif"
} <!--차례대로 이미지의 순서에 입각해 눌려진 숫자에 맞는 이미지로 바꾸어 줍니다.-->
}
//-->
</script>
다음을 <BODY></BODY> 사이에 넣습니다.
<form>
<input type="button" value=" 1 " onClick = "ch_num(1)">
<!--ch_num()의 괄호안의 내용은 해당 이미지의 화일명중 확장자를 제외한 이름을 설정하면 됩니다.-->
<input type="button" value=" 2 " onClick = "ch_num(2)">
<input type="button" value=" 3 " onClick = "ch_num(3)"> <br>
<input type="button" value=" 4 " onClick = "ch_num(4)">
<input type="button" value=" 5 " onClick = "ch_num(5)">
<input type="button" value=" 6 " onClick = "ch_num(6)"> <br>
<input type="button" value=" 7 " onClick = "ch_num(7)">
<input type="button" value=" 8 " onClick = "ch_num(8)">
<input type="button" value=" 9 " onClick = "ch_num(9)"> <br>
<input type="button" value=" 0 " onClick = "ch_num(0)">
</form>
<br><br><br>
<img src="0.gif"><img src="0.gif"><img src="0.gif"><b>-</b>
<img src="0.gif"><img src="0.gif"><img src="0.gif"><img src="0.gif">
<!--최초에 선택되어 있는 이미지 설정-->
'Tech: > HTML·DHTML' 카테고리의 다른 글
| 입력한 Text의 byte수 체크 (0) | 2008.06.26 |
|---|---|
| 까만 밤에 환한 플래쉬 비추기 효과 (0) | 2008.06.26 |
| 튀어나오는 애니메이션 효과 글자 (0) | 2008.06.26 |
| 페이지가 커튼처럼 열린다! (0) | 2008.06.26 |
| 시간 컨트롤: 방문시각에 맞춘 인삿말 (0) | 2008.06.26 |
