写真の特定の正方形をオンクリックします。 HTML

Question

マウスが画像の特定の四角の上にあるときに、OnClickイベントを追加したいと思います。 どうすればいいですか？

Answer 1

img要素のHTML マップ要素を使用してください。 onclickイベントを追加する必要がある各領域の位置と形状を含むマップ要素を定義する必要があります。その後、関連するimg要素を使用してそのマップを使用します。 Egが：

<img src="menu.jpg" width="150" height="150" usemap="#menumap" /> 

<map name="menumap"> 
    <area shape="rect" coords="0,0,10,10" alt="home" href="#" onclick="go_home();"/> 
    <area shape="rect" coords="20,20,30,30" alt="link2" href="#" onclick="do_link2();"/> 
</map> 

長方形の形状である形状「矩形」について、COORDS属性は、矩形の左、上、右、底角（左上隅の座標を指定します画像はこれらの座標のx = 0、y = 0点です）。

Answer 2

要素にマウスを置いたxとyの相対位置の確認

$('#example1').click(function(e){ 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    ... 
});