疑問

マウスが乗ったら離れた位置の画像を切り替える

処理

まず切り替わる画像を選択しNAME属性を指定します。

画像を選択し編集-属性の変更

属性のその他タブの「その他」でNAMEを任意で設定します。ここではswapとします。

属性の変更

次にマウスを乗せる画像を指定し編集-イベントの設定-イベントの編集

右側のイベントからOnMouseOverを選択後、左側のアクションから画像の「画像を入れ替えます。」をダブルクリック

イベントの設定

パラメータのドロップダウンメニューから先ほど指定したNAME属性(swap)を選択し、入れ替わる画像のファイルで画像を選択OK

パラメータ

引き続き、右側のイベントからOnMouseOutを選択後、同じ作業を繰り返し今度は元の画像を選択OK

イベントの設定

これを繰り返せば複数の画像にOnMouseOverでイベントを設定できます。

※Internet Explorer以外のブラウザでは一つのNAMEに対し複数のイベントを設定すると動作しない場合があります

スクリプト

<head></head>間

<script language="JavaScript">
<!--HPB_SCRIPT_CODE_40
function _HpbImgSwap(imgName, imgSrc)
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=false,isN6=false,isIE=false;
  if (document.all && appVer >= 4) isIE=true; else
    if (document.getElementById && appVer > 4) isN6=true; else
      if (document.layers && appVer >= 4) isNC=true;
  if (isNC||isN6||isIE)
  {
    if (document.images)
    {
      var img = document.images[imgName];
      if (!img) img = _HpbImgFind(document, imgName);
      if (img) img.src = imgSrc;
    }
  }
}

function _HpbImgFind(doc, imgName)
{
  for (var i=0; i < doc.layers.length; i++)
  {
    var img = doc.layers[i].document.images[imgName];
    if (!img) img = _HpbImgFind(doc.layers[i], imgName);
    if (img) return img;
  }
  return null;
}
//-->
</script>

要素・属性

切り替わる画像の部分

<img src="*****.gif" width="***" height="***" name="swap">

マウスが乗る部分

<img src="***.gif" width="**" height="**" onmouseover="_HpbImgSwap('swap', '***.gif');" onmouseout="_HpbImgSwap('swap', '***.gif');">

サンプル

関連ページ

画像の上にマウスが乗ったら、画像を切り替えたい