Javascript
Webサイト作成 TIPS

マウスオーバー（マウスを画像やリンクに合わせること）で合わさった画像を切り替えるのは、いろいろなソフトから自動生成などもできますが、ここでは特定の画像にマウスオーバーした時に、違う場所の画像を切り替える方法を紹介します。

まず、Javascriptを用意します。

 function changeimage(target,image){

document.getElementById(target).src=image;

 }

と書いて、image.jsとでも名前を付けて保存します。
基本的に、Javascriptを外部化して使用しましょう。その方が、SEO的にもよいといわれていますし、管理が楽です。

次にマウスオーバーする側の画像をbutton.pngとし、切り替える画像をbefore.pngからafter.pngとします。
（button.pngにマウスオーバーするとbefore.pngがafter.pngに変わる、マウスを外すとbefore.pngに戻る）

まず、button.pngのimgタグを

 <img src="button.png" border="0" 
 onMouseOver="changeimage('test','after.png')"
 onMouseOut="changeimage('test','before.png')">
 >

と書きます。

そして、切り替えたい画像の場所に

 <img src="before.png" alt="" id="test" >

と書きます。

最後に、忘れないように該当のhtmlに

 <script language="javascript" src="image.js"></script>

として、Javascriptを読み込ませます。
これで完成です。