묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[re] 첫 화면에 그림을 바뀌게 하려면...
2003.08.07 19:56
제 홈피에 있던걸 복사했습니다.
참고하세요..
JavaScript로 페이지 접속시마다 다른 배너(이미지)를 보여주는 소스입니다.
<script>
var img = new Array( //이미지 경로를 배열로 저장하는 부분
"http://www.prkorea.com/vankbanner.gif",
"http://www.positive.co.kr/products/event/event_img/positive_banner468x60.gif",
"http://cys.pe.kr/images/broke46860.gif"
);
i=img.length; // 배열의 개수를 계산하는 부분
n = new Date() % i; // 랜덤하게 숫자를 추출하는 부분
document.write('<img src=' + img[n] + ' border=0>'); // 이미지 출력부분
</script>
만일 보여질 이미지가 모두 같은 사이즈라면 위의 소스에서 이미지 출력부분에 있는 border=0 부분에 width=이미지폭 height=이미지높이를 추가하면 됩니다.
예) document.write('<img src=' + db[n] + ' border=0 width=468 height=60>');
이를 응용하면 아래 소스처럼 이미지에 링크거는 것도 가능하겠죠..
<script>
var img = new Array( // 이미지 경로를 배열로 저장하는 부분
"http://www.prkorea.com/vankbanner.gif",
"http://www.positive.co.kr/products/event/event_img/positive_banner468x60.gif",
"http://cys.pe.kr/images/broke46860.gif"
);
var url = new Array( // 링크할 url를 배열로 저장하는 부분
"http://www.prkorea.com",
"http://www.positive.co.kr",
"http://cys.pe.kr"
);
i=img.length; // 배열의 개수를 계산하는 부분
n = new Date() % i; // 랜덤하게 숫자를 추출하는 부분
document.write('<a href=' + url[n] + ' target=_blank><img src=' + img[n] + ' border=0></a>'); // 이미지 출력부분
</script>
주의할 점은 배열저장부분에서 이미지와 링크주소의 순서가 일치해야합니다. 실수를 하면 엉뚱한 곳으로 링크되는 수가 있겠죠..
참고 : 랜덤으로 숫자를 추출하기 위해 현재시간의 값을 배열 갯수로 나눈 나머지를 택하도록 했습니다. random함수를 사용할 수도 있지만 random 함수의 경우 랜덤값이 고르게 나오지 않고 특정값이 많이 나오는 현상이 있더군요. 그래서 저는 방문자가 접속했을 때의 시간값을 배열갯수로 나누는 방식을 택했습니다.
>첫 화면을 보면 접속 할 때 마다 다른 그림이 뜨게 하게 하려면 어찌하면 되나요?
>html로 가능한건가요?
>
참고하세요..
JavaScript로 페이지 접속시마다 다른 배너(이미지)를 보여주는 소스입니다.
<script>
var img = new Array( //이미지 경로를 배열로 저장하는 부분
"http://www.prkorea.com/vankbanner.gif",
"http://www.positive.co.kr/products/event/event_img/positive_banner468x60.gif",
"http://cys.pe.kr/images/broke46860.gif"
);
i=img.length; // 배열의 개수를 계산하는 부분
n = new Date() % i; // 랜덤하게 숫자를 추출하는 부분
document.write('<img src=' + img[n] + ' border=0>'); // 이미지 출력부분
</script>
만일 보여질 이미지가 모두 같은 사이즈라면 위의 소스에서 이미지 출력부분에 있는 border=0 부분에 width=이미지폭 height=이미지높이를 추가하면 됩니다.
예) document.write('<img src=' + db[n] + ' border=0 width=468 height=60>');
이를 응용하면 아래 소스처럼 이미지에 링크거는 것도 가능하겠죠..
<script>
var img = new Array( // 이미지 경로를 배열로 저장하는 부분
"http://www.prkorea.com/vankbanner.gif",
"http://www.positive.co.kr/products/event/event_img/positive_banner468x60.gif",
"http://cys.pe.kr/images/broke46860.gif"
);
var url = new Array( // 링크할 url를 배열로 저장하는 부분
"http://www.prkorea.com",
"http://www.positive.co.kr",
"http://cys.pe.kr"
);
i=img.length; // 배열의 개수를 계산하는 부분
n = new Date() % i; // 랜덤하게 숫자를 추출하는 부분
document.write('<a href=' + url[n] + ' target=_blank><img src=' + img[n] + ' border=0></a>'); // 이미지 출력부분
</script>
주의할 점은 배열저장부분에서 이미지와 링크주소의 순서가 일치해야합니다. 실수를 하면 엉뚱한 곳으로 링크되는 수가 있겠죠..
참고 : 랜덤으로 숫자를 추출하기 위해 현재시간의 값을 배열 갯수로 나눈 나머지를 택하도록 했습니다. random함수를 사용할 수도 있지만 random 함수의 경우 랜덤값이 고르게 나오지 않고 특정값이 많이 나오는 현상이 있더군요. 그래서 저는 방문자가 접속했을 때의 시간값을 배열갯수로 나누는 방식을 택했습니다.
>첫 화면을 보면 접속 할 때 마다 다른 그림이 뜨게 하게 하려면 어찌하면 되나요?
>html로 가능한건가요?
>