根据病情改变区域高亮颜色的JQuery maphighlight [英] JQuery maphighlight for changing area highlight color based on condition

问题描述

我一直在使用的地图坐标创建影像地图，并具有突出的坐标，这是工作的罚款，但我需要的是，要改变高亮颜色取决于条件......在第一condtion突出的区域红色然后在同一地区将与黑色为第二condition.I可以能够突出相同的区域被高亮显示，但我不能能够同时改变区域的颜色

I have created Image Map using map co-ordinates and have to highlighted co-ordinates, which is working fine but what i need is, To change the highlight color depends upon the condition...In first condtion highlight the area with the red color then the same area will be highlighted with the black color for the second condition.I can able to highlight the same area but i cant able to change the color of the area simultaneously.

这是我的拨弄样品code这里： 小提琴演示

My Sample Code on Fiddle Here : Fiddle Demo

我已经尝试使用

  <script>
        $(document).ready(function () //on page load
        {
            $('area[title*="UPPER"]').each(function ()//get all areas
            {
                $(this).addClass("victory");
            });

            $('area[title*="LOWER"]').each(function ()//get all areas
            {
                $(this).addClass("lose");
            });

            //initialize highlight
            $('.map').maphilight({ strokeWidth: 0, fillColor: "0000FF", fillOpacity: 0.8, singleSelect: true });

            ////map wrap
            $(".victory").click(function () {                
                //This block is what creates highlighting by trigger the "alwaysOn", 
                var data = $(this).data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                //there is also "neverOn" in the docs, but not sure how to get it to work
            });

            $('.map').maphilight({ strokeWidth: 0, fillColor: "FFFF00", fillOpacity: 0.8});

            $(".lose").click(function () {                
                //This block is what creates highlighting by trigger the "alwaysOn", 
                var data = $(this).data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                //there is also "neverOn" in the docs, but not sure how to get it to work
            });
        });
    </script>

小提琴演示

Fiddle Demo

但它是覆盖与第二fillcolor.any一个第一填充颜色帮我解决这个问题。

but which is overwrite the first fillcolor with second fillcolor.any one help me to resolve this problem.

推荐答案

您code不起作用，因为 area.style 并没有背景颜色属性。还要注意，你没有设置标题到区域在你的提琴S，似乎有 ALT ！而非

Your code doesn't work, because area.style has not background-color property. Notice also, that you haven't set titles to areas in your fiddle, there seems to be alts instead.

请注意，该使用插件在图像上创建了一个过于canvas元素，和高亮颜色是帆布的部分tranparent一部分。如果你想有地图的特定区域是黄色，你已经改变图像本身，或者使用例如一个重叠的图像，您可以稍后隐藏。

Notice, that the used plug-in creates an overly canvas element on the image, and the highlight color is a partially tranparent part of that canvas. If you want to have a particular area of the map being yellow, you've to change the image itself, or use for example an overlayed image, which you can hide later.

无论如何，该插件，你可以做这样的事情：

Anyway, with the plug-in you can do something like this:

$(function () {
    var data = {};
    $('.map').maphilight();
    data.alwaysOn = true;
    data.fillColor = 'ffff00';
    data.fillOpacity = '0.6';
    $('area[alt="UPPER HANOVER TOWNSHIP"]').data('maphilight', data).trigger('alwaysOn.maphilight');
});

在的jsfiddle 的现场演示。

这篇关于根据病情改变区域高亮颜色的JQuery maphighlight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！