|
使用例
(今回はクリックすると全部ここにジャンプします)
今回も
image/a_on.gif
| |
image/a_off.gif
|
image/b_on.gif
| |
image/b_off.gif
|
の4枚の画像を使ってみました。
まず、HTMLの<HEAD>……</HEAD>の部分(最初の部分)に置きます。
(ここは変更していません。)
<SCRIPT LANGUAGE="JavaScript">
<!----------------------
var ver4 = (navigator.appVersion.charAt(0) >= "4");
var NN4 = ver4 && (navigator.appName == "Netscape");
var IE4 = ver4 && (navigator.appName.charAt(0) == "M");
var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName == "Netscape"));
function In(nam,num) {
if(NN3 || NN4 || IE4) document.images[nam].src = menu[num].src;
}
function Out(nam,num) {
if(NN3 || NN4 || IE4) document.images[nam].src = menu[num].src;
}
if(NN3 || NN4 || IE4){
var menu = new Array();
menu[0] = new Image(); menu[0].src = "image/a_on.gif";
menu[1] = new Image(); menu[1].src = "image/a_off.gif";
menu[2] = new Image(); menu[2].src = "image/b_on.gif";
menu[3] = new Image(); menu[3].src = "image/b_off.gif";
}
//----------------->
</SCRIPT>
そして、表示させたいところにはこれをおいてください。
<A HREF="Aをクリックしたときのリンク先のアドレス" OnMouseOver="In('A',);return true" OnMouseOut="Out('A',1)">
<img src="image/a_off.gif" name="A" BORDER="0"></A>
<A HREF="Bをクリックしたときのリンク先のアドレス" OnMouseOver="In('B',2);return true" OnMouseOut="Out('B',3)">
<img src="image/b_off.gif" name="B" BORDER="0"></A>
つまり、前ページで解説したように、対象となる画像・変化後の画像をきちんと指定すればいくつでも自由に変化させることが出来ます。
|