У меня есть два небольших предложения, одно из которых - избегать использования тегов области и размещать над изображением тег холста, и использовать Paper.js , чтобы рисовать на нем и связывать с каждым событием рисования событие щелчка.Если вы не хотите работать в старых браузерах, я рекомендую Raphael.js .
В любом случае ... если вы все еще хотите использовать тег области, вы можете иметьsmall dot.png image и поместите его в качестве фона для тега области и измените его положение для тега области каждой страны, например:
.area {
background: url("../images/dot.png") no-repeat;
}
.area#poland {
background-position: 100px 150px;
}
.area#argentina {
background-position: -100px -300px;
}
Надеюсь, это поможет, ура.
--------------------------РЕДАКТИРОВАТЬ-------------------------------
Хорошо, здесь у вас есть рабочее решение: 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;
}
main.js:
$(document).ready(function () {
$(".location").click(function() {
if (!$(this).hasClass(".active")) {
$(".location.active").removeClass("active");
$(this).addClass("active")
}
});
});
Надеюсь, все ясно, как есть, теперь у меня нет времени, чтобы объяснить это лучше, но если у вас есть какие-либо сомнения, пожалуйста, спросите это, и яотредактирую позже.
ура !!