Javascript-如何更改图像部分的颜色

我有一个纯白色的图像。我正在使用

和

标记创建调用函数的小部分，但我还想更改每个部分的颜色。我该怎么做

编辑：我还想制作它，以便以后可以更改颜色，我想使用Javascript，因为颜色取决于某个变量是什么

---

编辑2:颜色更改不能只在鼠标上方进行。

这将在css中首先为其设置颜色

为每个标签设置一个id

<map id="my_fake_id">

要在以后更改它，您只需调用一个函数，检查该值是否等于您希望它等于的值，然后将css颜色设置为您想要的颜色

var change_color = function(param){
    var exampleValue = whatever-the-value-is;
    if(param == exampleValue){
       $("#my_fake_id").css('color','red');

    }
}

---

编辑： 看这把小提琴，了解正确的想法和出发点

---

编辑：根据您对原始问题的评论，这不会永久改变颜色，只会在鼠标悬停时暂时改变颜色

有几种方法可以做到这一点。首先是为

地图的每个区域覆盖一些div，并为div上色。您也可以通过叠加图像并使图像显示在您将鼠标悬停在上面的
地图
部分来完成此操作。
例如，如果你有一张世界地图，你想在鼠标悬停时突出显示北美，制作地图北美部分的图像，并将div覆盖在现有图像上，使其显示在鼠标悬停时

一种更好（更简单）的方法是创建一个图像，其宽度为原始图像的宽度乘以
s的数量加1。此长图像的最左侧区域将显示原始图像，原始图像的副本彼此堆叠在右侧，每个副本都高亮显示所需区域

-------------------
|orig.|  1  |  2  |
|     |     |     |
-------------------

然后使用CSS将图像向左移动，以便突出显示的区域显示在鼠标上方。这样做的另一个优点是只需在浏览器中加载一个图像，还可以减少闪烁

希望这是有意义的；如果您需要进一步澄清，请留下评论。
类似的方法可能会奏效

<area shape="rect" COORDS="0,0,800,600" href="#" onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='transparent';"/>

您是否在或上使用单击或更改jQuery功能。。。。。。。。当发生其他交互时，是否要更改该部分的颜色？或者永久性地改变它的颜色？永久性地改变它。。。嗯，实际上，我以后会想把它换成另一种颜色，但是一旦页面加载，它就应该是一种特定的颜色。我不喜欢内联样式，但从技术上讲，你也可以做内联样式替代其他样式。如果你的css样式不起作用，最好的办法是打开控制台，检查您要更改的元素，然后查看哪些其他样式（在右侧列）阻止该颜色出现。我不明白您的意思。让我们来看看，我只希望它是该颜色，无论鼠标在哪里。您尝试过内联吗？这不是一个很好的编码习惯，但会改变颜色。我在你的回答中回答了这个问题。我如何使它永久性地改变？或者至少在我以后改变它之前。
<area shape="rect" COORDS="0,0,800,600" href="#" onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='transparent';"/>

<area shape="rect" COORDS="0,0,800,600" href="#" onclick="this.style.backgroundColor='#00FF00';"/>

function changeMyColor(){
  var changeThisColor = document.getElementById('yourElement');
  changeThisColor.innerHTML += '<area style="background-color:'+ yourColorVariable +';"  
}