JavaScript 활용

JavaScript 활용 예제 : 마우스가 위에 가면 변하는 이미지

이미지 1개 : in-line 처리

<a href="#top" onMouseOver="menu.src='images/quick.jpg'"

onMouseOut="menu.src='images/quick2.gif'">

이미지 여러개 : head에서 이미지 배열을 이용한 함수 msover(i) 와 msout(i) 호출

Javascript 함수 : msover(i), msout(i), MakeArray(n)

<head>

{

pageoff = MakeArray(3) // 이미지 배열 생성 (**함수내에서 new)

pageon = MakeArray(3)

        pageoff[1].src = "images/menu1.gif"
        pageoff[2].src = "images/menu2.gif"
        pageoff[3].src = "images/menu3.gif"
        pageon[1].src = "images/menu11.gif"
        pageon[2].src = "images/menu22.gif"
        pageon[3].src = "images/menu33.gif"
}
function MakeArray(n) {
        imgArray = new Array(n+1)            // **새로운 배열 생성
                                                    // imgArray.length = n    // 배열의 개수
        for (var i = 1; i<=n; i++)
                imgArray[i] = new Image()       // 새로운 개체 생성 (이미지)
        return imgArray
}
function msover(num) {
        document.images[num].src = pageon[num].src     // 문서내 객체 배열
}
function msout(num) {
        document.images[num].src = pageoff[num].src
}
</script>
</head>