html - リンク可能な画像部分をdivで作成しますか?

Question

ここのように画像の一部をリンクするにはどうすればよいですか：

http://www.ceciliabotta.com/index.html ?

要素を調べると、いくつかの座標が表現されていることがわかります。これはそれを行う方法ですか？背景画像の上に div を作成しようとしましたが、まったく機能していないようで、行き詰まりました。

Answer 1

マップ エリアの概念を使用します。

3枚の画像を撮ります。1) 元の画像 2) 入力のホバー画像 (つまり、黒文字で入力のみを含む全体画像、つまりホバー状態)
3) ビデオのホバー画像 4) プレスのホバー画像

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />   

<map name="Map" id="Map">
  <area shape="rect" coords="77,18,123,81" href="#" onmouseover="onHover('inputhoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')" />
  <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('videohoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
  <area shape="rect" coords="77,18,125,100" href="#" onmouseover="onHover('presshoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
</map>


<script>


function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
} 
function onout6(image2)
{ 
document.getElementById('originalimage').src=image2; 
} 
</script>

ここで、hover座標上で画像がホバー画像に変わり、その上mouseoutで元の画像に変わります。

エリアの座標を取得する方法については、以下のリンクを参照してください。

画像座標を取得する方法は?.

または、以下のstackoverflowの質問を参照してください

Answer 2

マップエリアを使用

<img src="name.png" width="140" height="140" border="0" usemap="#Map" />

<map name="Map" id="Map">
  <area shape="rect" coords="77,18,123,81" href="#" />
</map>