랜덤 이미지 마우스오버시 롤오버 시키기

http://oxtag.com/html/ex/random/ImgOver_Rand/imgover_rand.html

<script>
// 랜덤 롤오버 이미지
// 만든넘 : 카멜롯™, http://oxtag.com/, tagpia@hotmail.com
       
        var bgimg
        do bgimg = Math.random().toString().charAt(2);
        while (bgimg > 5 || bgimg < 1);        // 5는 이미지 개수, 1은 이미지 파일명 시작 번호.
       
                // 마우스 오버시 나타날 이미지
                imgrandon = new Image;
                imgrandon.src = "./over/top_btn_" +bgimg+ "_on.gif";        // 이미지 파일명은 top_btn_1_on.gif, top_btn_2_on.gif, top_btn_3_on.gif,....
                // 마우스 아웃시 나타날 이미지
                imgrandoff = new Image;
                imgrandoff.src = "./out/top_btn_" +bgimg+ ".gif";        // 이미지 파일명은 top_btn_1.gif, top_btn_2.gif, top_btn_3.gif,...

        function img_on(imgName) {
                imgOn = eval(imgName + "on.src");
                document[imgName].src = imgOn;
        }

        function img_off(imgName) {
                imgOff = eval(imgName + "off.src");
                document[imgName].src = imgOff;
        }

        document.writeln("<a href='#None' onMouseOver=\"img_on('imgrand');\" onMouseout=\"img_off('imgrand');\"><img src=./out/top_btn_" +bgimg+ ".gif border=0 width=90 height=59 align=abdmiddle name='imgrand'></a>");

</script>

페이지 접속시마다 이미지가 랜덤으로 바뀌고, 이미지가 롤오버됨니다.

마우스를 이미지에 올려보세요. 롤오버되죠.

새로 고침도 해보시구요. 마우스도 올려보세요.

처음 나타나는 이미지는 out 폴더에 넣습니다.

마우스 오버시 나타나는 이미지는 over 폴더에 넣으세요.

위 소스를 보시면 느끼시겠지만 파일명은 abc_1_on.gif 와 abc_1.gif

이러한 형태로 숫자만 똑 같이 늘려서 이미지를 만드시면 됨니다.