我目前正在使用 David Lynch 的 maphighlight jquery 插件。
链接 - http://davidlynch.org/projects/maphilight/docs/
我想在图像映射上同时显示两种不同的颜色，并将alwaysOn 功能设置为true。
我在下面附上了我的代码片段。 其主要功能是:
1)悬停时默认突出显示为绿色，双击图像时，颜色变为红色。
2) 选择颜色后，单击左键，按住鼠标并拖动多个图像区域以突出显示它们。
3) 您还可以单击已突出显示的区域来删除突出显示。
我急需的一项附加功能是:单击并拖动并突出显示多个区域后。当我双击(这会更改突出显示悬停颜色)时，我希望已经突出显示的区域保持原样而不改变颜色。
当前的问题是当我双击所有突出显示的区域时颜色会发生变化。
任何有关此问题的帮助将非常感激!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js">
</script>
<script type = "text/javascript">
var click_flag = 1; //changes value each time a click is made
var loop_control = 1; // is a flag to run only one click loop at a time
var down = false;
// setting mouse hover default colours
$(document).ready(function(){
$('.mapHighLight').maphilight({
fillColor: '00ff00', strokeColor:'000000'
});
// function to change colour
$('area').dblclick(function(e){
if(click_flag == 1 && loop_control == 1){
$('.mapHighLight').maphilight({
fillColor: 'ff0000', strokeColor:'000000' // red
});
click_flag = 0;
//alert("1st loop "+ ":click_flag = "+click_flag+" and loop_control = "+loop_control);
}
});
$('area').dblclick(function(e){
if(click_flag == 0 && loop_control == 0){
$('.mapHighLight').maphilight({
fillColor: '00ff00', strokeColor:'000000' //green
});
click_flag = 1;
//alert("2nd loop "+ ":click_flag = "+click_flag+" and loop_control = "+loop_control);
}
});
// this section is set the correct flag values at the right time.
function status_change(){
if(click_flag == 1){loop_control = 1};
if(click_flag == 0){loop_control = 0};
//alert("3rd loop "+ ":click_flag = "+click_flag+" and loop_control = "+loop_control)
}
// the delay is to make this code run in the end, to ensure proper change of values.
$('area').dblclick(function(e){
setTimeout(status_change,500);
});
// this function is for mouse hold
$('area').bind({
mousedown : function(e){
down = true;
},
mousemove : function(e){
if(down){
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
}
},
mouseup : function(e){
down = false;
}
});
//This block is to turn off "alwaysOn" feature of maphilight plugin
$("area").click(function(e){
var data = $(this).data('maphilight') || {};
data.alwaysOn = false;//!data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
});
});
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class = "mapHighLight " src = "http://www.goldhillcoldtouch.co.uk/wp-content/uploads/dermatome_torso1.png" alt = "dermatomeUpperbodyFront" usemap = "#upper1">
<map class = "dMap1" name = "upper1">
<area id = "t1R" shape="poly" href="#" coords="77,95,53,59,63,43,75,34,93,19,110,11,126,4,141,1,158,2,173,3,191,4,205,5,220,6,236,6,255,7,274,8,297,8,312,10,328,9,340,8,341,16,340,27,340,38,341,52,320,52,297,52,278,51,262,50,244,48,223,47,198,46,177,46,154,48,133,54,112,61,94,73" />
<area id = "t1L" shape="poly" href="#" coords="341,10,343,52,373,50,391,50,408,49,426,50,441,50,458,51,474,52,486,56,498,62,510,68,521,82,526,93,527,96,531,90,534,80,550,35,537,23,522,17,505,10,481,5,438,6,412,9,381,9,354,10" />
<area id = "t2R" shape="poly" href="#" coords="90,121,77,95,86,82,104,69,119,60,136,53,158,48,176,46,195,45,221,46,241,48,265,50,283,51,305,52,329,53,341,52,342,95,319,95,288,93,267,92,240,92,212,91,189,91,162,92,142,96,119,103"/>
<area id = "t2L" shape="poly" href="#" coords="341,52,344,94,393,95,404,95,426,94,442,94,461,95,474,97,492,101,502,107,512,115,526,96,517,78,505,67,490,58,466,52,433,51,404,51,376,51,353,51" />
<area id = "t3R" shape="poly" href="#" coords="87,144,85,127,105,112,120,104,141,98,162,93,190,91,211,90,238,92,266,92,286,94,317,96,331,95,342,94,343,138,316,140,282,139,250,136,220,133,189,132,162,131,139,132,113,136" />
<area id = "t3L" shape="poly" href="#" coords="342,95,342,139,365,138,390,136,416,135,440,134,460,132,480,131,500,135,516,142,516,124,509,114,491,102,467,96,430,95,394,96,362,95" />
<area id = "t4R" shape="poly" href="#" coords="341,139,341,190,321,190,295,192,268,192,244,192,221,191,184,190,170,188,153,187,136,184,110,179,98,174,88,171,85,145,100,139,120,134,140,132,160,130,182,132,206,133,237,135,256,137,275,139,296,140,318,140"/>
<area id = "t4L" shape="poly" href="#" coords="341,139,342,190,364,192,396,194,417,192,445,190,466,183,481,179,496,174,505,168,515,162,515,140,498,134,473,131,448,134,420,136,393,136,368,139,349,139" />
<area id = "t5R" shape="poly" href="#" coords="341,191,342,239,326,237,312,235,285,237,261,240,234,239,210,239,189,237,169,236,149,233,129,229,113,225,100,219,90,213,88,171,98,176,110,181,129,185,149,188,172,191,196,192,218,192,237,193,262,193,287,193,314,192,325,192" />
<area id = "t5L" shape="poly" href="#" coords="342,191,342,239,364,241,393,240,417,240,443,235,465,231,480,226,494,220,504,216,512,208,514,207,513,163,504,170,487,179,465,185,439,192,417,193,400,195,364,193" />
<area id = "t6R" shape="poly" href="#" coords="341,239,342,280,318,283,294,283,272,283,252,280,226,280,205,278,182,276,161,273,146,267,132,261,117,254,105,247,94,240,93,213,110,223,128,230,152,233,172,235,197,236,229,239,254,239,281,238,304,235,317,235,331,238" />
<area id = "t6L" shape="poly" href="#" coords="342,239,343,283,368,282,392,281,416,279,436,275,455,268,472,261,486,253,496,248,505,240,512,236,515,208,501,217,486,224,458,233,432,237,402,240,372,241,353,240" />
<area id = "t7R" shape="poly" href="#" coords="341,283,343,336,322,336,288,333,262,332,231,328,209,323,190,320,172,315,152,310,136,305,120,299,108,289,102,287,96,240,108,249,125,259,144,267,166,274,188,279,211,280,242,282,269,283,294,284,317,284" />
<area id = "t7L" shape="poly" href="#" coords="342,282,344,334,373,331,406,327,428,322,451,314,472,307,490,296,501,287,506,279,513,234,505,240,489,250,473,259,449,268,428,275,418,277,389,280,357,281" />
<area id = "t8R" shape="poly" href="#" coords="341,335,342,374,319,375,298,377,276,377,248,373,224,368,204,362,179,355,158,348,140,342,128,336,117,330,105,288,116,295,128,303,143,307,162,312,181,318,200,322,224,326,249,331,273,332,298,334,325,335" />
<area id = "t8L" shape="poly" href="#" coords="342,335,342,374,354,374,374,372,392,370,408,365,424,360,438,354,449,348,462,341,474,336,486,328,498,319,502,303,505,290,505,283,498,290,488,298,472,307,455,311,437,317,418,322,396,326,377,331" />
<area id = "t9R" shape="poly" href="#" coords="336,374,337,424,329,423,320,419,310,420,299,422,286,423,277,423,261,418,246,412,234,403,217,394,201,388,185,382,169,378,156,374,140,368,131,362,122,358,117,329,125,334,133,339,146,344,158,348,175,354,188,358,204,363,218,366,232,370,251,374,265,375,282,376,296,376,314,376" />
<area id = "t9L" shape="poly" href="#" coords="336,376,337,424,358,423,372,419,385,412,406,403,418,395,430,389,445,381,462,373,474,367,487,358,493,352,499,319,490,327,478,334,464,343,451,349,433,357,417,363,396,369,366,375,345,376" />
<area id = "t10R" shape="poly" href="#" coords="330,424,331,482,310,482,296,481,274,477,254,469,238,460,227,449,206,435,195,427,177,417,164,412,150,405,138,398,128,393,122,359,132,365,148,372,162,377,178,383,195,389,212,395,228,401,244,411,260,418,272,423,287,424,303,423,315,420,324,422" />
<area id = "t10L" shape="poly" href="#" coords="330,424,333,481,354,479,368,476,380,469,392,463,401,453,414,440,423,429,437,419,449,410,463,402,476,393,488,387,493,351,486,359,474,367,459,375,440,384,428,391,414,399,402,405,385,414,368,419,351,424" />
<area id = "t11R" shape="poly" href="#" coords="316,481,317,545,298,546,279,544,264,540,250,533,235,525,221,511,212,498,200,480,188,467,173,454,160,444,146,437,134,429,125,420,127,391,141,401,157,409,177,417,193,426,212,439,233,456,246,467,265,473,282,479,301,482" />
<area id = "t11L" shape="poly" href="#" coords="317,482,317,545,340,542,359,536,376,529,392,518,406,506,418,487,429,473,442,458,455,443,466,435,483,426,492,424,489,387,474,394,459,403,443,412,433,420,422,430,410,442,400,452,386,466,368,475,342,481" />
<area id = "t12R" shape="poly" href="#" coords="300,547,301,596,278,596,262,593,247,588,234,580,228,568,221,557,210,536,200,521,187,507,176,497,160,481,147,475,133,464,126,460,122,420,134,429,146,436,159,444,177,457,193,473,206,489,218,509,235,525,250,535,270,542" />
<area id = "t12L" shape="poly" href="#" coords="300,547,302,597,329,595,347,594,367,586,382,573,394,553,406,533,419,515,432,497,448,482,464,469,480,460,488,457,492,424,477,429,462,438,447,451,436,464,424,480,413,495,400,511,377,527,358,537,321,545" />
</map>最佳答案
我无法实现我想要的原始功能，但我确实使用 maphilight 找到了替代解决方案。我使用“悬停”和“单击并拖动”事件将颜色设为绿色。之后，我设置“单击”事件将单击的区域变成红色。这样我就可以同时打开两种颜色，而没有映射区域具有固定的颜色设置。
我已将代码片段与此答案一起附加。以防万一有人发现它有用。
请注意，此功能仅在 jquery 1.11.1 或 1.11.2 版本上进行了测试
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/jquery.maphilight.js">
</script>
<script type = "text/javascript">
var click_flag = 1; //changes value each time a click is made
var loop_control = 1; // is a flag to run only one click loop at a time
var down = false;
// setting mouse hover default colours
$(document).ready(function(){
$('.mapHighLight').maphilight({
fillColor: '00ff00', strokeColor:'000000'
});
// this function is for mouse hold
$('area').bind({
mousedown : function(){
down = true;
},
mousemove : function(){
if(down){
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = '00ff00';
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
$(this).data('maphilight', data).trigger('fillColor.maphilight');
}
},
mouseup : function(){
down = false;
}
});
//This block is to turn off "alwaysOn" feature of maphilight plugin
$("area").click(function(){
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
data.fillColor = 'ff0000';
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
$(this).data('maphilight', data).trigger('fillColor.maphilight');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img class = "spot mapHighLight " src = "http://www.goldhillcoldtouch.co.uk/wp-content/uploads/dermatome_torso1.png" alt = "dermatomeUpperbodyFront" usemap = "#upper1">
<map class = "dMap1" name = "upper1">
<area id = "t1R" shape="poly" href="#" coords="77,95,53,59,63,43,75,34,93,19,110,11,126,4,141,1,158,2,173,3,191,4,205,5,220,6,236,6,255,7,274,8,297,8,312,10,328,9,340,8,341,16,340,27,340,38,341,52,320,52,297,52,278,51,262,50,244,48,223,47,198,46,177,46,154,48,133,54,112,61,94,73" />
<area id = "t1L" shape="poly" href="#" coords="341,10,343,52,373,50,391,50,408,49,426,50,441,50,458,51,474,52,486,56,498,62,510,68,521,82,526,93,527,96,531,90,534,80,550,35,537,23,522,17,505,10,481,5,438,6,412,9,381,9,354,10" />
<area id = "t2R" shape="poly" href="#" coords="90,121,77,95,86,82,104,69,119,60,136,53,158,48,176,46,195,45,221,46,241,48,265,50,283,51,305,52,329,53,341,52,342,95,319,95,288,93,267,92,240,92,212,91,189,91,162,92,142,96,119,103"/>
<area id = "t2L" shape="poly" href="#" coords="341,52,344,94,393,95,404,95,426,94,442,94,461,95,474,97,492,101,502,107,512,115,526,96,517,78,505,67,490,58,466,52,433,51,404,51,376,51,353,51" />
<area id = "t3R" shape="poly" href="#" coords="87,144,85,127,105,112,120,104,141,98,162,93,190,91,211,90,238,92,266,92,286,94,317,96,331,95,342,94,343,138,316,140,282,139,250,136,220,133,189,132,162,131,139,132,113,136" />
<area id = "t3L" shape="poly" href="#" coords="342,95,342,139,365,138,390,136,416,135,440,134,460,132,480,131,500,135,516,142,516,124,509,114,491,102,467,96,430,95,394,96,362,95" />
<area id = "t4R" shape="poly" href="#" coords="341,139,341,190,321,190,295,192,268,192,244,192,221,191,184,190,170,188,153,187,136,184,110,179,98,174,88,171,85,145,100,139,120,134,140,132,160,130,182,132,206,133,237,135,256,137,275,139,296,140,318,140"/>
<area id = "t4L" shape="poly" href="#" coords="341,139,342,190,364,192,396,194,417,192,445,190,466,183,481,179,496,174,505,168,515,162,515,140,498,134,473,131,448,134,420,136,393,136,368,139,349,139" />
<area id = "t5R" shape="poly" href="#" coords="341,191,342,239,326,237,312,235,285,237,261,240,234,239,210,239,189,237,169,236,149,233,129,229,113,225,100,219,90,213,88,171,98,176,110,181,129,185,149,188,172,191,196,192,218,192,237,193,262,193,287,193,314,192,325,192" />
<area id = "t5L" shape="poly" href="#" coords="342,191,342,239,364,241,393,240,417,240,443,235,465,231,480,226,494,220,504,216,512,208,514,207,513,163,504,170,487,179,465,185,439,192,417,193,400,195,364,193" />
<area id = "t6R" shape="poly" href="#" coords="341,239,342,280,318,283,294,283,272,283,252,280,226,280,205,278,182,276,161,273,146,267,132,261,117,254,105,247,94,240,93,213,110,223,128,230,152,233,172,235,197,236,229,239,254,239,281,238,304,235,317,235,331,238" />
<area id = "t6L" shape="poly" href="#" coords="342,239,343,283,368,282,392,281,416,279,436,275,455,268,472,261,486,253,496,248,505,240,512,236,515,208,501,217,486,224,458,233,432,237,402,240,372,241,353,240" />
<area id = "t7R" shape="poly" href="#" coords="341,283,343,336,322,336,288,333,262,332,231,328,209,323,190,320,172,315,152,310,136,305,120,299,108,289,102,287,96,240,108,249,125,259,144,267,166,274,188,279,211,280,242,282,269,283,294,284,317,284" />
<area id = "t7L" shape="poly" href="#" coords="342,282,344,334,373,331,406,327,428,322,451,314,472,307,490,296,501,287,506,279,513,234,505,240,489,250,473,259,449,268,428,275,418,277,389,280,357,281" />
<area id = "t8R" shape="poly" href="#" coords="341,335,342,374,319,375,298,377,276,377,248,373,224,368,204,362,179,355,158,348,140,342,128,336,117,330,105,288,116,295,128,303,143,307,162,312,181,318,200,322,224,326,249,331,273,332,298,334,325,335" />
<area id = "t8L" shape="poly" href="#" coords="342,335,342,374,354,374,374,372,392,370,408,365,424,360,438,354,449,348,462,341,474,336,486,328,498,319,502,303,505,290,505,283,498,290,488,298,472,307,455,311,437,317,418,322,396,326,377,331" />
<area id = "t9R" shape="poly" href="#" coords="336,374,337,424,329,423,320,419,310,420,299,422,286,423,277,423,261,418,246,412,234,403,217,394,201,388,185,382,169,378,156,374,140,368,131,362,122,358,117,329,125,334,133,339,146,344,158,348,175,354,188,358,204,363,218,366,232,370,251,374,265,375,282,376,296,376,314,376" />
<area id = "t9L" shape="poly" href="#" coords="336,376,337,424,358,423,372,419,385,412,406,403,418,395,430,389,445,381,462,373,474,367,487,358,493,352,499,319,490,327,478,334,464,343,451,349,433,357,417,363,396,369,366,375,345,376" />
<area id = "t10R" shape="poly" href="#" coords="330,424,331,482,310,482,296,481,274,477,254,469,238,460,227,449,206,435,195,427,177,417,164,412,150,405,138,398,128,393,122,359,132,365,148,372,162,377,178,383,195,389,212,395,228,401,244,411,260,418,272,423,287,424,303,423,315,420,324,422" />
<area id = "t10L" shape="poly" href="#" coords="330,424,333,481,354,479,368,476,380,469,392,463,401,453,414,440,423,429,437,419,449,410,463,402,476,393,488,387,493,351,486,359,474,367,459,375,440,384,428,391,414,399,402,405,385,414,368,419,351,424" />
<area id = "t11R" shape="poly" href="#" coords="316,481,317,545,298,546,279,544,264,540,250,533,235,525,221,511,212,498,200,480,188,467,173,454,160,444,146,437,134,429,125,420,127,391,141,401,157,409,177,417,193,426,212,439,233,456,246,467,265,473,282,479,301,482" />
<area id = "t11L" shape="poly" href="#" coords="317,482,317,545,340,542,359,536,376,529,392,518,406,506,418,487,429,473,442,458,455,443,466,435,483,426,492,424,489,387,474,394,459,403,443,412,433,420,422,430,410,442,400,452,386,466,368,475,342,481" />
<area id = "t12R" shape="poly" href="#" coords="300,547,301,596,278,596,262,593,247,588,234,580,228,568,221,557,210,536,200,521,187,507,176,497,160,481,147,475,133,464,126,460,122,420,134,429,146,436,159,444,177,457,193,473,206,489,218,509,235,525,250,535,270,542" />
<area id = "t12L" shape="poly" href="#" coords="300,547,302,597,329,595,347,594,367,586,382,573,394,553,406,533,419,515,432,497,448,482,464,469,480,460,488,457,492,424,477,429,462,438,447,451,436,464,424,480,413,495,400,511,377,527,358,537,321,545" />
</map>
</body>关于javascript - 使用maphilight jquery插件同时保持两种颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31674393/