특정 페이지에 접속할때 마다 특정 이미지를 다르게 보여주고 싶을때 사용할 수 있다. 아래 데모를 보고 리로드를
해보면 이미지가 접속할때 마다 변하는것을 알수있다. 사용하는 방법은 다음과 같다. 예제에 보여진 소스를 원하는
이름으로 저장하고 이미지를 지정하는 곳(var BgArray 라는 곳에서 지정할수있다)에 내가 원하는 이미지를
지정하면 된다.
| script example |
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var BgArray = new Array(
"./img/d15_work1.gif",
"./img/d15_work2.gif",
"./img/d15_work3.gif",
"./img/d15_work4.gif",
"./img/d15_work5.gif",
"./img/d15_work6.gif",
"./img/d15_work7.gif"
);
var gifimage="";
var picfolder="./";
today=new Date();
jran=today.getTime();
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
gifimage = picfolder+BgArray[ ( Math.ceil((jran/(im*1.0))
*BgArray.length) ) - 1];
</script>
</head>
<body>
페이지를 리로드 해보세요 그림이 변합니다.
<p>
<script>
document.write("<img src='"+gifimage+"'>");
</script>
</body>
</html> |
|
|
| 설명 |
| 이미지는 크기가 다르면 그 전체적인 형태가 어긋나므로 구조가 어긋날때는
사이즈가 같은 이미지를 사용하도록 한다. 이미지의 수는 상관없다. head
태그 사이에 있는 script 태그를 자신의 홈페이지의 head 태그 사이에
삽입하고 body 태그 안에 있는 스크립트 태그를 자신의 홈페이지의 원하는
곳에 그대로 삽입하면 된다. |
|
|
|
|
