Rollover image

リンクを付けた画像にポインタを合わせたときと、クリックしたときに画像が変わります。
※<A HREF="・・・>の間は改行しないでください。
<HTML>
<HEAD>
<TITLE>Rollover image</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
if(navigator.appVersion.charAt(0)>=3){
    pic_name1=new Array(); pic1=new Array();
    pic_name2=new Array(); pic2=new Array();
    pic_name3=new Array(); pic3=new Array();

    //マウスを外したとき(最初)の画像
    pic_name1[0]="image/home1.gif"; pic1[0]=new Image(); pic1[0].src=pic_name1[0];
    pic_name1[1]="image/mail1.gif"; pic1[1]=new Image(); pic1[1].src=pic_name1[1];
    pic_name1[2]="image/top1.gif"; pic1[2]=new Image(); pic1[2].src=pic_name1[2];
    pic_name1[3]="image/back1.gif"; pic1[3]=new Image(); pic1[3].src=pic_name1[3];
    pic_name1[4]="image/click1.gif"; pic1[4]=new Image(); pic1[4].src=pic_name1[4];

    //マウスを乗せたときの画像
    pic_name2[0]="image/home2.gif"; pic2[0]=new Image(); pic2[0].src=pic_name2[0];
    pic_name2[1]="image/mail2.gif"; pic2[1]=new Image(); pic2[1].src=pic_name2[1];
    pic_name2[2]="image/top2.gif"; pic2[2]=new Image(); pic2[2].src=pic_name2[2];
    pic_name2[3]="image/back2.gif"; pic2[3]=new Image(); pic2[3].src=pic_name2[3];
    pic_name2[4]="image/click2.gif"; pic2[4]=new Image(); pic2[4].src=pic_name2[4];

    //クリックしたときの画像
    pic_name3[0]="image/home3.gif"; pic3[0]=new Image(); pic3[0].src=pic_name3[0];
    pic_name3[1]="image/mail3.gif"; pic3[1]=new Image(); pic3[1].src=pic_name3[1];
    pic_name3[2]="image/top3.gif"; pic3[2]=new Image(); pic3[2].src=pic_name3[2];
    pic_name3[3]="image/back3.gif"; pic3[3]=new Image(); pic3[3].src=pic_name3[3];
    pic_name3[4]="image/click3.gif"; pic3[4]=new Image(); pic3[4].src=pic_name3[4];

function dispImage(status){//マウスを外したとき
      document.images["Img"+status].src=pic1[status].src;
  }

function overImage(status){//マウスが乗ったとき
      document.images["Img"+status].src=pic2[status].src;
  }

function clickImage(status){//クリックしたとき
      document.images["Img"+status].src=pic3[status].src;
  }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" OnMouseOut="dispImage(0)" onMouseOver="overImage(0)" onClick="clickImage(0)"><IMG NAME="Img0" SRC="image/home1.gif" WIDTH="48" HEIGHT="48" BORDER="0"></A>
<A HREF="#" OnMouseOut="dispImage(1)" onMouseOver="overImage(1)" onClick="clickImage(1)"><IMG NAME="Img1" SRC="image/mail1.gif" WIDTH="48" HEIGHT="48" BORDER="0"></A>
<A HREF="#" OnMouseOut="dispImage(2)" onMouseOver="overImage(2)" onClick="clickImage(2)"><IMG NAME="Img2" SRC="image/top1.gif" WIDTH="48" HEIGHT="48" BORDER="0"></A>
<A HREF="#" OnMouseOut="dispImage(3)" onMouseOver="overImage(3)" onClick="clickImage(3)"><IMG NAME="Img3" SRC="image/back1.gif" WIDTH="48" HEIGHT="48" BORDER="0"></A>
<A HREF="#" OnMouseOut="dispImage(4)" onMouseOver="overImage(4)" onClick="clickImage(4)"><IMG NAME="Img4" SRC="image/click1.gif" WIDTH="48" HEIGHT="48" BORDER="0"></A>
</BODY>
</HTML>
BACK