时间戳

首页 > 解决方案 > 如何在地图（html）坐标上设置图像或颜色？

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

问题描述

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

我尝试过使用背景颜色，但这不起作用，我认为正确的方法是使用 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>

标签： javascripthtml

解决方案

在做了一些研究之后，我发现了这个 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();

});


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

推荐阅读