マウスを重ねると画像が変化

　次の画像にマウスを重ねると、画像が変化します。

　まず、次のJavaScriptのコードを<head>～</head>に貼り付けてください。

<script type="text/javascript">
<!--
function change_Image(url, imgID){
    imgID.src = url;
}
//-->
</script>

　そして、マウスが重なる前の画像を"./before.gif"、重なったときの画像を"./after.gif"だとすると、次のように設置した画像にonmouseoverとonmouseoutを追加してください。

<img src="./before.gif" onmouseover="change_Image('./after.gif',this)" onmouseout="change_Image('./before.gif',this)">

　大きな画像を使う場合は、最初にマウスが重なったときに表示に時間がかかります。対策として、画像のプリロードを利用してください。