疑問

1枚の画像で2つのロールオーバーを掛ける

処理

ここでは三枚の画像を使って進めます。

ef11_neutral
通常時に表示される画像（ここではファイル名をsample_base.gif、説明上の呼び名をBASEとします。）
ef11_sample1
画像1（ここではファイル名をroollover_1.gif、説明上の呼び名をROOLOVER1とします。）
ef11_sample2
画像2（ここではファイル名をroollover_2.gif、説明上の呼び名をROOLOVER2とします。）

まずBASEにNAME属性を設定します。画像を選択し

編集-属性の変更-その他タブのNAMEに記入します。ここでは「ROOLOVER」とします。

画像の属性

次にBASEの「SAMPLE1」の部分にイメージマップを設定します。（イメージマップについては「一つの画像に複数のリンクを張る」を参考にしてください。）

ここでの要素は

画像部分

<img src="sample_base.gif" width="110" height="110" usemap="#sample_base" name="ROOLOVER">

マップを指定する部分

<map name="sample_base">
 <area href="#" shape="rect" coords="13,13,100,35">
 <area shape="default" nohref>
</map>

の様になります。

次にBASEに対しイベントを設定します。画像を選択し編集-イベントの設定からイベントの編集でイベントは「OnMouseOver」を選択、アクションは「画像を入れ替えます。」をダブルクリックします。パラメータの指定のパラメータは「ROOLOVER」、入れ替える画像のファイルの参照からROOLOVER1の画像を選択します。このままではカーソルを乗せると画像が切り替わったままになってしまうので同じ様にイベントの編集からイベントで「OnMouseOut」でアクションは「画像を入れ替えます。」をダブルクリックしパラメータの指定のパラメータは「ROOLOVER」、入れ替える画像のファイルの参照からBASEの画像を選択します。

イベントの編集

パラメータの指定

この時点でBASEのソースは

<img src="sample_base.gif" width="110" height="110" usemap="#sample_base" name="ROOLOVER" onmouseover="_HpbImgSwap('ROOLOVER', 'roollover_1.gif');" onmouseout="_HpbImgSwap('ROOLOVER', 'sample_base.gif');">

このようになります。ここで編集画面をHTMLソースに切り替えてBASEのソースから

onmouseover="_HpbImgSwap('ROOLOVER', 'roollover_1.gif');" onmouseout="_HpbImgSwap('ROOLOVER', 'sample_base.gif');"

を切り取り、先に設定したmapの「SAMPLE1」を示すarea要素のcoords="13,13,100,35"の後ろに半角スペースを空けて貼り付けてください。

<map name="sample_base">
 <area href="#" shape="rect" coords="13,13,100,35" onmouseover="_HpbImgSwap('ROOLOVER', 'roollover_1.gif');" onmouseout="_HpbImgSwap('ROOLOVER', 'sample_base.gif');">
 <area shape="default" nohref>
</map>

BASEのSAMPLE2の部分にも同じ様にROLLOVER2に対してのイベントの設定と切り取り、貼り付けを行ってください。

スクリプト

<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="sample_base.gif" width="110" height="110" usemap="#sample_base" name="ROOLOVER">

map部分

<map name="sample_base">
 <area href="#" shape="rect" coords="13,13,100,35" onmouseover="_HpbImgSwap('ROOLOVER', 'roollover_1.gif');" onmouseout="_HpbImgSwap('ROOLOVER', 'sample_base.gif');">
 <area href="#" shape="rect" coords="13,77,100,103" onmouseover="_HpbImgSwap('ROOLOVER', 'roollover_2.gif');" onmouseout="_HpbImgSwap('ROOLOVER', 'sample_base.gif');">
 <area shape="default" nohref>
</map>

サンプル

ef11_neutral