아래 스크립트는 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">   

     <!--최초에 선택되어 있는 이미지 설정-->



Posted by 떼르미
,


자바스크립트를 허용해주세요!
Please Enable JavaScript![ Enable JavaScript ]