Question

我正在尝试在地图的坐标中使用颜色，而不是透明的可点击空间。当我单击圆圈（我仅使用圆圈）时，颜色应该改变（例如，从红色变为蓝色）。

我已经尝试过使用background-color，但这是行不通的，我认为正确的方法是使用javascript或jquery。

<img src="mapworld.jpg" width="600" height="400" alt="mapworld" usemap="#mapworld">
<map name = "mapworld">
  <area id = "s1" target="_blank" alt="Circle1" title="Position 1" 
        href="www.google.com.ec" coords="10, 20, 4" shape="circle">
</map>

Answer 1

经过一些研究，我发现了这个JQuery库，它会自动突出显示区域，您要做的就是在.maphilight()为document时在图像上调用ready

您将需要在html文件中下载并实现这两个文件：

JQuery：https://code.jquery.com/jquery-3.3.1.min.js

此文件必须保存在单独的文件中，并包含在之后 JQuery（在您的HTML文件ofc中）。
MapHighlight库： https://raw.githubusercontent.com/kemayo/maphilight/master/jquery.maphilight.js

下面是一个演示演示的JSFiddle：http://jsfiddle.net/8Lw7saf6/1/

用法：

/* JQUERY */
$(document).ready(function(){

    $('img[usemap]').maphilight();

});

这是doc的两个演示：
https://davidlynch.org/projects/maphilight/docs/demo_usa.html
https://davidlynch.org/projects/maphilight/docs/demo_world.html

如何在地图（html）坐标上设置图像或颜色？

1 个答案: