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

我有一个纯白色的图像。我使用<map>和<area>标签来创建调用函数的小节，但我也想更改每节的颜色。我怎样才能做到这一点？Javascript - 如何更改图像部分的颜色

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

编辑2：颜色变化不能只是在鼠标悬停。

来源

2014-03-12 CPC

您是使用点击还是更改jQuery函数或 ?? ........如果您想在某些其他交互发生时更改该部分的颜色？或者只是永久改变它的颜色？ –

只是永久地改变它......其实，我希望稍后将其更改为另一种颜色，但只要页面加载，它就应该从某种颜色开始。 – CPC

这将最初在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/

来源

2014-03-12 16:09:22

我不是内嵌造型的粉丝，但从技术上讲，您也可以执行 –

，但没有工作，我已经试过了。 – CPC

我不明白这会如何更好地工作。 – CPC

编辑：按照您的评论对原来的问题，这不会永久地改变颜色，只是暂时的鼠标移到。

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

这样做的一个更好的（也是更简单的方法）是创建一个图像，即原始图像的宽度乘以<area> s的数目加1.该长图像的最左侧区域将具有原始图像，将原始图像的副本相邻堆放在右侧，每个副本都突出显示所需的区域。

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

然后使用CSS向左移动图像，使高亮显示的区域显示在鼠标上方。这具有只需要在浏览器中加载一个图像的附加优点，并且还减少了闪烁。

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

来源

2014-03-12 16:11:01 ElGavilan

如何让它永久更改？或者至少在我稍后改变它之前。 – CPC

像这样的东西可能工作

<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 +';" 
}

来源

2014-03-12 16:11:12 JayD

我只想让它成为那种颜色，不管鼠标在哪里。 – CPC

你尝试过内联吗？？它不是一个很好的编码习惯，但是这会改变我在回答中回答的那个颜色 –

。 – CPC

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

回答

相关问题