HP 画像の一部にリンクでその部分のみ画像変化
ホームページを勉強し始めたものですが、今ヘッダーの画像の一部に”問い合わせ”ボタンのようなのがある状態ですが、マウスオーバーさせるとそのボタンの絵だけを画像変化させるようにするのにつまずいています。自分でやるとどうしてもヘッダーの画像にすこしでもマウスオンするとボタンがすでに変化用の画像に切り替わってしまいます。<AREA>を使ってみてもやはりリンクの部分だけでなく、画像全体に反応してしまいます。周りのホームページ詳しい人に聞いても、分かりませんでした。。。
実際のHTMLは下記の通りです。
<div id="header_pic">
<img border="0" src="../../img/元の画像.png" onMouseOver= "this.src='../../img/画像変化後.png'" onMouseOut="this.src='../../img/元の画像.png'" alt="事務所" width="980" height="130" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="743,40,917,74" href="../contact/index.html" alt="問い合わせ">
</map>
画像の一部にリンクを設置し、その部分に乗った時だけ、その部分のみを画像変化させることはできないのでしょうか?
どなたかご教示お願いいたします。
お礼
こんばんは。うーん、脂身の部分も動物なのでもちろんありますよね。お店で出しているのはボタンの様に綺麗に切った部位ですが、その他の部位も地元では食べられているんでしょうね。白色なので脂肪なのか身なのか不明ですが、美味しいことは間違いないです。