Question

我的图像是纯白色的。我使用<map>和<area>标记来制作调用函数的小部分，但我还想更改每个部分的颜色。我怎么能这样做？

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

编辑2：颜色变化只能在鼠标悬停时完成。

Answer 1

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

为每个标记设置ID

<map id="my_fake_id">

CSS中的

#my_fake_id {
    color:#color_number;
}

稍后更改它你要做的就是调用一个函数，检查该值是否等于你想要的值，然后将css颜色设置为你想要的颜色。

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

    }
}

编辑：看到这个小提琴正确的想法和起点 http://jsfiddle.net/mrQJu/2/

Answer 2

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

有几种方法可以做到。首先是为map的每个区域覆盖一些div并为div着色。您也可以通过叠加图像并在将鼠标悬停在map的部分上方显示图像来执行此操作。因此，例如，如果您有一个世界地图，并且想要在鼠标悬停时突出显示北美，请创建地图北美部分的图像，并将div叠加在现有图像上，以便鼠标悬停在其上。

更好（更简单的方法）是创建一个图像，即原始图像的宽度乘以<area> s的数量加1.此长图像的最左侧区域将包含您的图像原始图像，原始图像的副本在右侧彼此相邻堆叠，每个副本都突出显示所需区域。

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

然后使用CSS将图像向左移动，以便鼠标悬停时显示突出显示的区域。这具有额外的优点，即只需要在浏览器中加载一个图像，并且还可以减少闪烁。

希望这是有道理的;如果您需要进一步澄清，请发表评论。

Answer 3

这样的事可能有效

<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';"/>

如果颜色基于变量...... 使用onclick = changeMyColor()

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

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

3 个答案: