ここのように画像の一部をリンクするにはどうすればよいですか:
http://www.ceciliabotta.com/index.html ?
要素を調べると、いくつかの座標が表現されていることがわかります。これはそれを行う方法ですか?背景画像の上に div を作成しようとしましたが、まったく機能していないようで、行き詰まりました。
ここのように画像の一部をリンクするにはどうすればよいですか:
http://www.ceciliabotta.com/index.html ?
要素を調べると、いくつかの座標が表現されていることがわかります。これはそれを行う方法ですか?背景画像の上に div を作成しようとしましたが、まったく機能していないようで、行き詰まりました。
マップ エリアの概念を使用します。
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
で元の画像に変わります。
エリアの座標を取得する方法については、以下のリンクを参照してください。
マップエリアを使用
<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>