Java-Script

　マウスがオンすると画像イメージを変える。 　　　　　

Sample　下の画像にマウスを　Ｏｎ　させてください。

ソース

<HTML>

<SCRIPT language="JavaScript">
function HpbImgPreload()
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
  var isIE=(document.all    && (appVer >= 4)); // Internet Explorer  4.0 or later
  if (isNC || isIE)
  {
    if (document.images)
    {
      var imgName = HpbImgPreload.arguments[0];
      var cnt;
      swImg[imgName] = new Array;
      for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
      {
        swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
        swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
      }
    }
  }
}
// HpbImgSwap: 画像を入れ換えます
//
function HpbImgSwap(imgName, imgSrc)
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=(document.layers && (appVer >= 4)); // Netscape Navigator 4.0 or later
  var isIE=(document.all    && (appVer >= 4)); // Internet Explorer  4.0 or later
  if (isNC || isIE)
  {
    if (document.images)
    {
      document.images[imgName].src = imgSrc;
    }
  }
}
var swImg; swImg=new Array;
HpbImgPreload('_HPB_ROLLOVER1', 'img0.gif', 'img1.gif');
</SCRIPT>

<BODY>

<A href="#" id="_HPB_ROLLOVER1" 
	onmouseout="HpbImgSwap('_HPB_ROLLOVER1','img0.gif');" 
	onmouseover="HpbImgSwap('_HPB_ROLLOVER1','img1.gif');">
	<IMG src="img0.gif" border="0" name="_HPB_ROLLOVER1"></A>
</BODY>
</HTML>

ワンポイント解説

function HpbImgPreload() で、画像を先読みしています。
function HpbImgSwap(imgName, imgSrc) で、画像を入れ替えます。
ホームページのメニューなどに応用すると良いと思います。