jquery - jqueryまたはjquerymobileに画像部分のイベント処理機能はありますか?

Question

このような画像がある場合、ユーザーがクリックした数または領域に基づいてイベントを処理できますか?

例、

ユーザーがこの画像の 1 をクリックすると、url1 に移動します。ユーザーがこの画像の 2 をクリックすると、url2 に移動します。

もちろん、これは1枚の画像です。

jqueryまたはjquerymobileにこのような機能はありますか?

Answer 1

イメージマップを使用する必要があります：

<img src="your img source" width="100" height="100" alt="*alt*" usemap="#yourmap">

<map name="yourmap">
  <area shape="rect" coords="0,0,50,50" href="firsturl">
  <area shape="rect" coords="50,0,100,50" href="secondurl">
  <area shape="rect" coords="0,50,50,100"  href="thirdurl">
  <area shape="rect" coords="50,50,100,100"  href="forth">

</map>

最初に画像サイズがわからない場合は、JavaScript または jQuery を使用して寸法を計算し、ドキュメント対応イベント ハンドラーで html を生成できます。