リンクマップで画像を作成したい。マップには、非常に頻繁に変更する必要がある多くの領域が含まれます。数秒ごとに領域を再作成する代わりに、ユーザーが実際に画像をクリックしたときにのみ領域を作成したいと思います。
イベントが発生したらエリアを作成することでこれが可能になることを願っていましたmousedown
が、これは機能していないようです (新しく作成されたエリアのクリックは処理されません)。
これまでの私のjavascriptコード(フィドル):
$(document).ready(function () {
$('#overlayDiv').mousedown(function () {
$('#image').click(function () {
$('#linkmap').children().remove();
$(document.createElement('area'))
.attr("shape", "rect")
.attr("onclick", "alert('click');")
.attr("coords", "0,0, 400,400")
.appendTo('#linkmap');
});
});
});
起こるべきことの「ワークフロー」
- 画像をクリック
- すべての既存の領域が削除されます
- エリアが再現されています
- クリックは新しい領域で処理されます