이 스크립트는 이미지가 바뀌는 메뉴(1)과 이미지가 바뀌는 메유(2)의 스크립트를 합쳐놓은 스크립트라 생각하면 된다. 즉 마우스를 그림에 올려놓으면 그 그림도 변하고 다른곳의 그림도 동시에 변한다. 미리보기에서 결과를 볼 수 있다. 아래의 스크립트를 살펴보면 (1)과 (2)에서와 같은 형태로 자신의 홈페이지에 맞게 수정하면 된다.



HTML Example
<HTML>
<HEAD><title>demo05.html</title>

<SCRIPT language=JavaScript>
if (document.images) {

// 다른곳에서 변할 그림1을 지정한다.
image1menu = new Image();
image1menu.src = "ex_home.gif";

// 마우스를 올려놓았을 때의 그림1지정
image1over = new Image();
image1over.src = "top_home_.gif";

// 마우스를 치웠을 때의 그림1지정
image1out = new Image();
image1out.src = "top_home.gif"

// 다른곳에서 변할 그림2을 지정한다.
image2menu = new Image();
image2menu.src = "ex_intr.gif";

// 마우스를 올려놓았을 때의 그림2지정
image2over = new Image();
image2over.src = "top_intr_.gif";

// 마우스를 치웠을 때의 그림2지정
image2out = new Image();
image2out.src = "top_intr.gif"

}

function imageMenu(imgName) {
if (document.images) {
document["blank"].src = eval(imgName + "menu.src");
}
}

function imageMenuOff() {
if (document.images) {

// 별할그림의 공각지정하는 여백그림지정
document["blank"].src = "top.gif";
}
}

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
       if (browserName == "Netscape" && browserVer >= 3){
            init = "net";
           }
       else{
            init = "ie";
           }
if ((init == "net")||((init == "ie")&&(browserVer >= 4))){

function imageOver(imgName)
   {
     if (((init == "net")&&(browserVer >=3))||((init == "ie")&&(browserVer >= 4))){
       imgOver = eval(imgName + "over.src");
       document[imgName].src = imgOver;
       }
   }

function imageOut(imgName)
   {
     if (((init == "net")&&(browserVer >=3))||((init == "ie")&&(browserVer >= 4))){
       imgOut = eval(imgName + "out.src");
       document[imgName].src = imgOut;
       }
   }

}
</SCRIPT>

</HEAD>

<BODY bgcolor=black>

<center>

<!-- 그림1의 링크지정 -->
<a HREF="script05.html" onMouseover="imageMenu('image1');imageOver('image1')" onMouseout="imageMenuOff();imageOut('image1')">
<img src="top_home.gif" border=0 name="image1"></a>

<!-- 그림2의 링크지정-->
<a HREF="script05.html" onMouseover="imageMenu('image2');imageOver('image2')" onMouseout="imageMenuOff();imageOut('image2')">
<img src="top_intr.gif" border=0 name="image2"></a>

<!-- 변할 공간의 여백그림을 지정한다. -->
<img src="top.gif" border=0 name="blank">

</BODY>
</HTML>