文字をポイントしたときに画像をかえてみよう
表示の例
パンダ ペンギン ねこ ねずみ ライオン

 動物の名前にマウスを乗せると、その動物の画像が表示されます。
プログラムAのソースをコピーして、画像を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function gazou(mySrc){
document.myimg.src=mySrc;
}
//-->
</SCRIPT>
<center>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons1.gif')">パンダ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons2.gif')">ペンギン</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons3.gif')">ねこ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons4.gif')">ねずみ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons5.gif')">ライオン</a>
<br><br>
<img name="myimg" src="images/icons1.gif" border="0" width="32" height="32">
</center>
プログラムAのソースの上から9行目〜13行目に、表示される画像のファイル名と表示する文字が書かれてあります。
例では onMouseOver="gazou('images/icons1.gif')" などの images/icons1.gif が画像のファイル名ですから、あなたの表示させたい画像のファイル名にかえてください。表示する文字は、パンダ などのところをかえてくださいね。
下から2行目のところで、基準になる画像を指定しています。文字をポイントした時に、この画像と入れ替えをしています。
画像の大きさはできるだけ同じがいいと思います。すべての画像は、この部分で指定した画像の大きさで表示されます。
src="images/icons1.gif" の images/icons1.gif を、ページが開いた時に表示させたい画像のファイル名にかえてください。
この images/icons1.gif は大きさが、よこ32ピクセル、たて32ピクセルの画像ですから、width="32" height="32" となっています。この 32  32 は、あなたの選んだ画像の大きさにかえてくださいね。
このソースでは、画像が表示されるだけで、クリックしてもリンクはしないようになっています。もし画像をクリックしてリンクをする場合には、a href="JavaScript:void(0)" のところの JavaScript:void(0) を消して、リンク先のアドレス(index.html など)にかえてください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ