マウスオーバー時に画像が切り替わる。

webのコト
JavaScript ナビゲーション コチラでご確認いただけます

HTML内の記述

<script text="text/javascript">
<!--
var defImg;
function ImgChange(target, img){
  if(document.getElementById){
    defImg = document.getElementById(target).getAttribute("src");
    document.getElementById(target).setAttribute("src", img);
  }
}
function ImgBack(target){
  if(document.getElementById){
    document.getElementById(target).setAttribute("src",defImg);
  }
}
//-->
</script>
</head>

<body>

<div id="nav">
<img src="images/illustrator.png" id="image1" onMouseOver="ImgChange('image1', 'images/illustrator_over.png')" onMouseOut="ImgBack('image1')">

<img src="images/photoshop.png" id="image2" onMouseOver="ImgChange('image2', 'images/photoshop_over.png')" onMouseOut="ImgBack('image2')">

<img src="images/dw_css.png" id="image3" onMouseOver="ImgChange('image3', 'images/dw_css_over.png')" onMouseOut="ImgBack('image3')">

<img src="images/flash.png" id="image4" onMouseOver="ImgChange('image4', 'images/flash_over.png')" onMouseOut="ImgBack('image4')">

<img src="images/site_works.png" id="image5" onMouseOver="ImgChange('image5', 'images/site_works_over.png')" onMouseOut="ImgBack('image5')">
</div>

</body>
</html>