<分区>
标签 javascript html css image area
我正在为飞镖计分板构建一个脚本，您可以在其中单击飞镖盘的 throw 框，这样它就可以计算您 throw 了多少分。但是为了使这成为可能，我需要发布到图像的某个区域(飞镖)。所以我认为飞镖的每个盒子都必须是一个提交按钮。这是我已有的脚本部分(按钮:Bullseye、Bull、20、D20、T20)。我已经可以点击它们，但我只能引用超链接 (href)。所以我的问题是如何发布到图像的特定区域或将图像的特定区域作为提交按钮。
我的脚本:
<img src="dartbord.png" width="600" height="600" alt="Dartbord" usemap="#darts">
<map name="darts">
<area shape="circle" coords="300,300,11" alt="Bullseye" href="darts.php">
<area shape="circle" coords="300,300,23" alt="Bull" href="darts.php">
<area shape="poly" coords="280,172,300,170,320,172,321,160,300,158,278,161" alt="Triple 20" href="darts.php">
<area shape="poly" coords="300,300,334,90,267,90" alt="20" href="darts.php">
<area shape="poly" coords="267,90,300,87,334,90,335,77,300,74,265,77" alt="Dubbel 20" href="darts.php">
</map>
最佳答案
您需要为此使用 Javascript。只需为图像 map 的每个区域提供一个单独的 ID 并触发脚本以在相应区域的 click 事件上执行任何操作。
示例 Fiddle here
代码片段如下...
$("area").on('click', function(e) {
document.getElementById("textfield").value = $(this).attr("id");
console.log($("#textfield").val());
/* over here you can have what ever javascript you want to do with data manipulation */
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="" method="post" id="formthis">
<input type="text" id="textfield" size="25" value="TextField" />
</form>
<div>
<img id="mandala_img" src="http://i.stack.imgur.com/A690W.png" width="600" height="541" usemap="#mandala_map" />
<map name="mandala_map" id="mandala_map">
<area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="#area_image1" id="area_image1" />
<area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="#area_image2" id="area_image2" />
<area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="#area_image3" id="area_image3" />
<area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="#area_image4" id="area_image4" />
<area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="#area_image5" id="area_image5" />
<!-- only using 5 areas instead of 8 , starting from the top middle going clockwise -->
</map>
</div>现在这只是概念验证。如果你想提交表单，你也可以使用 JS 来完成，或者你只想显示一个分数，这似乎不需要后端提交表单，你可以只写你的脚本来显示分数。
希望这对您有所帮助。 快乐编码:)
关于javascript - 使用图像区域作为提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29286532/