|
|
Switching Image |
이번글에서는 페이지내로 불러온 이미지를 클릭했을때 다른 그림으로 전환이 되도록 해볼게요.
알고 있으면 좋은 만한 것들을 정리해볼게요.
2. Math 객체의 Random 함수와 round 함수
3. while 반복문
4. onclick 이벤트
다음 파일은 소스 파일입니다. 숫자 이미지 5개와 html 파일이 있어요.
사용법은 이미지와 html파일이 동일한 경로, 즉, 같은 폴더내에 있으면 되겠습니다.
Doit.zip
우선 소스는 다음과 같습니다.
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 클릭을 통한 이미지 교체</TITLE>
</HEAD>
<SCRIPT language="javascript">
function image_onclick(){
1. var arrImage=new Array("num1.png", "num2.png", "num3.png", "num4.png", "num5.png");
2. var imgSource=document.targetImg;
3. var intRandom=Math.round(Math.random()*4); //0~4의 값을 반환합니다.
4. while(imgSource.src.indexOf(arrImage[intRandom]) != -1){
intRandom=Math.round(Math.random()*4);
}
5. imgSource.src=arrImage[intRandom];
}
</SCRIPT>
<BODY>
<IMAGE name="targetImg" src='num1.png' onclick="image_onclick()">
</BODY>
</HTML>
우선 위에 보이는 페이지는 이미지를 클릭했을때 첨부한 5개의 이미지가 랜덤으로 보이게 끔 해놓았습니다.
그렇다면소스 설명 먼저 들어 갈게요 ^^
1. 이미지 주소 저장
- 배열을 생성해서 배열안에 이미지 주소들이 저장되도록 했습니다. 현재 배열에는 파일 이름과 확장자명만 보여서 주소라하면 의아해 하실텐데요, 이는 우선 동일한 경로안 즉, 같은 폴더에 해당 이미지 파일과 html 파일이 존재하기 때문에, 각 파일명의 앞 부분 주소를 생략할 수 있습니다.
2. 이미지 태그 참조
- imgSource라는 변수를 하나 만들어서 이 변수가 <BODY> 태그 내에 있는 <IMAGE> 태그를 참조할 수 있도록 했습니다. 이때 <IMAGE> 태그의 name 을 활용해서 접근토록 했습니다. 변수를 쓰는 이유는 매번 주소를 쓰기엔 코드가 불필요하게 길어지고, 그러면 결과적으로 시인성이 떨어지기 때문이죠~
3. 배열의 랜덤 인덱스 생성
- 1번의 배열에 담은 이미지들의 인덱스를 랜덤하게 가지고 오게 하기 위해서 Math 객체의 random과 round 함수가 쓰였는데요, 여기서 round 함수를 쓴 이유는 random함수의 결과 값이 double형 즉, 실수형으로 나오기때문에, round 즉 반올림 함수를 통해서 정수로 바꾸고자 하는데 있습니다. 배열의 인덱스는 0,1,2,3... 이지 실수가 아니거든요. 그리고 배열의 길이가 5이기 때문에 random 함수에서 *4 를 설정했습니다. 그렇다면 반환하는 정수 값은 0에서 4까지가 되겠습니다.
4. 중복 이미지 확인
intRandom=Math.round(Math.random()*4);
}
- 이부분이 조금 이해하기 어려울 수도 있습니다. 이 반복문의 목적은 지금 화면에 표시되어 있는 이미지가 앞으로 표시될 이미지와 동일한 이미지인지 확인하고 그렇다면, 위의 배열의 다른 인덱스의 이미지 주소를 불러오고자 하는데 있습니다. 다르다면, while문 안의 내용을 무시하는 것이구요.
while문의 조건문을 보시면 imgSuorce 즉, 화면에 표시되어 있는 이미지의 주소-imgSource.src-가 앞의 랜덤 인덱스 생성으로 확인된 새로운 인덱스의 주소 -arrImage[intRandom]-와 동일하지 않다면 false값을 반환하고, 동일하면 true 값을 반환하도록 해놓았는데요.
여기서 indexOf 라고 하는 함수를 보시면. 이는 인자로 넘겨진 String 값 -arrImage[intRandom]- 이 이 함수를 호출한 String 값
-imgSource.src : num1.png- 에 어느 인덱스에 위치하는지를 확인하고, 그 인덱스 값을 정수로 반환하는 함수 입니다. 만일 그런 문자나 문자열 값이 없다면 -1을 반환하구요.(여기가 핵심이죠~!)
그래서 예를 들자면, arrImage[3] 이라는 인덱스의 값 num4.png가 indexOf 함수의 인자로 들어가게 되면, image 태그에서 src의 값 num1.png 에는 num4.png라는 연속되는 문자열값이 존재하지 않기 때문에 -1을 반환해서 while문의 조건식에서 false가 되어 종료가 되구요.
똑같은 값이 나온다면, 인덱스 값이 -1이 아닌 것이 나올겁니다. 문자열이 일치하는 부분이 있기 때문이죠. 참고로, 문자열의 첫번째 문자 n의 인덱스는 0입니다. 그렇게 인덱스가 0 이상의 값이 나오게 되면 while문의 조건문이 true가 되기 때문에 안에 기술되어 있는 랜덤 인덱스를 한번더 불러내게 됩니다.
이러한 반복 과정을 거쳐서 기존에 화면에 표시되어 있는 이미지와는 다른 주소가 담겨있는 배열의 인덱스를 intRandom 변수가 가집니다.
다음과 같이 while문의 조건문을 작성해서 비교할수 있지 않느냐? 라는 분이 있을거에요.
여기서 확인해야 할 것은 imgSource.src가 반환하는 값이에요. 그렇다면 제가 alert 태그를 통해서 imgSource.src 의 값을 출력한 값을 보여드리면 다음과 같습니다.
값을 보시면 단순히 "num1.png" 가 아니라는 것을 아실 수 있을거에요. 그래서 위의 조건문은 아무리 돌려도 false 값만 반환하기 때문에,
while문이 필요없게 되는거죠.
5. 화면 이미지 교체
- 그럼 기존의 이미지와 다른 이미지 주소가 확인된 intRandom의 인덱스 번호를 다시 배열에 넣어서 imgSource.src 즉, 화면에 이미지를 보여주고 있는 <IMAGE> 태그의 src 값을 변환해서 다른 그림을 보여주게 됩니다.
[결과 화면]
|
부족한 문장실력 봐주시느라 고생하셨구요. 다른 방식으로도 구현할 수 있으니 참고해주세요. 궁금하시거나 도움줄 말이 있으시면 댓글 부탁드립니다 ^^ |
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 유효성 검사, 모든 폼에 값이 입력되도록 해보자! (5) | 2012.06.19 |
|---|---|
| [자바스크립트] 'focus', 엔터 누르고 이동하자! (2) | 2012.06.19 |
| [자바스크립트] 'alert', 메시지 창을 띄우자! (4) | 2012.06.18 |
| [자바스크립트] 'defaultStatus', 상태표시줄에 텍스트를 띄우자! (1) | 2012.06.18 |
| [자바스크립트] BOM-'history' 객체 (0) | 2012.06.18 |
