私は二つの小さな提案を持っているが、一つは画像の上にキャンバスタグをエリアタグと場所を使用して回避し、onclickイベントを描き、それぞれにと関連付ける上に描画するためにPaper.jsを使用することです。古いブラウザではうまくいかないものをお持ちでない場合は、代わりにRaphael.jsをお勧めします。
いずれにしても、地域タグを使用したい場合は、小さなdot.png画像を使用して地域タグの背景として配置し、各国のエリアタグの位置を変更することができます。
.area {
background: url("../images/dot.png") no-repeat;
}
.area#poland {
background-position: 100px 150px;
}
.area#argentina {
background-position: -100px -300px;
}
私はそれが助けてくれることを願っています。
--------------------------- EDIT ------------------ http://jsfiddle.net/8gDLV/1/
HTML：：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="map-container">
<img src="http://www.theodora.com/maps/new4/world_color.gif"/>
<div id="tucuman" class="location"></div>
<div id="buenosaires" class="location"></div>
<div id="paris" class="location"></div>
</div>
</body>
</html>
があるmain.css：
#map-container {
width: 648px;
height: 413px;
border: 1px solid black;
position: relative;
}
#map-container .location {
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background: red;
cursor: pointer;
}
#map-container .location.active {
background: yellow;
}
#map-container .location#tucuman {
top: 337px;
left: 126px;
}
#map-container .location#buenosaires {
top: 350px;
left: 130px;
}
#map-container .location#paris {
top: 139px;
left: 264px;
}
-------------
[OK]を、ここでは、実用的なソリューションを持っています
メイン.js：
$(document).ready(function() {
$(".location").click(function() {
if (!$(this).hasClass(".active")) {
$(".location.active").removeClass("active");
$(this).addClass("active")
}
});
});
私はそれが正しいと思いますが、今はそれをよりよく説明する時間がありませんが、疑問があればお尋ねください。後で編集します。
乾杯！
あなたは何をする必要があるのか理解しようとしていますか？ –
私は、提供された画像から地図上のクリック可能なポイントを持つ画像マップを生成するウェブサイトを見つけました。 –
W3Cによれば、「」要素は[onclickを含む]すべての標準DOMイベントをサポートしているので、クリックハンドラを付けても問題ありません。 –