←ボタンに触れると画像が変化します。
JAVAに戻る ←リンクに触れると画像が変化します。
以下の文章を<HEAD>〜</HEAD>内に入れて下さい。
<![CDATA[
<script language="JavaScript">
<!--
if(navigator.appVersion.charAt(0) >= 3)
{
var img = new Array();
for(i=1; i<3; i++)
{
img[i] = new Image();
}
img[1]. src = "button1.gif";
img[2]. src = "button0.gif";
}
function image(name, number)
{
if(navigator.appVersion.charAt(0) >= 3)
{
document.images[name].src = img[number].src;
}
}
// -->
</script>
]]>
画像の表示はもっと増やす事ができます。例えばこの例で増やすなら次は「img[3]. src = "xxx.gif";」（xxxは画像の名前）になります。でもその場合画像が3枚に増えたので6行目が「for(i=1; i<3; i++)」から「for(i=1; i<4; i++)」となる事に注意して下さい。
以下の文章を<BODY>〜</BODY>内に入れて下さい。
<![CDATA[
<a href="java.html"onMouseover="image('java1',1)"onMouseout="image('java1',2)">
<img src="button0.gif"alt="ボタン"name="java1"border="0"></a>
←ボタンに触れると画像が変化します。<br><br>
<img src="button0.gif"alt="ボタン"name="java2"border="0">
<a href="java.html"onMouseover="image('java2',1)"onMouseout="image('java2',2)">
JAVAに戻る</a> ←リンクに触れると画像が変化します。
]]>
‘onMouseover’でマウスが画像に来た時の状態を設定し、‘onMouseout’でマウスが画像から離れた時の状態を設定します。
1行目の「image('java1',1)」の部分の‘java1’はリンク名で半角英数字なら何でも構いません。そして次の‘1’という数字は上で書いた「img[1]. src =」の右の部分に書いてある画像を表示させるという意味です。‘2’なら「img[2]. src =」の右の部分に書いてある画像を表示させるという意味です。
<img>タグの中の画像名は最初に表示させておく画像を書いておきます。そして‘name’の後ろはリンク名と同じにして下さい。そして「border="0"」と書いておきます。
リンクが変わると違うリンク名にして下さい。
JAVA SCRIPTに戻る
ホームへ戻る