我正在使用名为Image Map Plus的插件。当我将鼠标悬停在该位置上时，它的作用是高亮显示图像上的热点。我想要它做的是......
我在图片下面有一个列表。当我将鼠标悬停在其中一个列表项上时，图像上的相应热点将获得它的悬停效果。该插件提供了该功能，但仅在点击时没有悬停...通过将其添加到我的列表项
<li><a href="#" data-open-spot="poly-3692">3314 Administration</a></li>
它与数据有关 - 开放点=＆＃34; poly-3692＆＃34;
poly-3692针对热点。这是我代码中的JS。
<script type="text/javascript">
;(function ($, window, document, undefined) {
$(document).ready(function() {
$("#map").imageMapPro({"id":4954,"editor":{"previewMode":1,"selected_hotspot":"poly-3692","tool":"poly"},"general":{"name":"dan","width":1143,"height":572,"responsive":1,"sticky_tooltips":0,"constrain_tooltips":1,"image_url":"http://test.ccri.edu/about/floorplans/knight/images/3rd_flr_2013_layout2.png","tooltip_animation":"grow","pageload_animation":"none"},"spots":[{"id":"poly-3692","type":"poly","x":12.876427829698859,"y":9.130122214234364,"width":5.919003115264798,"height":11.412652767792956,"actions":{"mouseover":"no-action","click":"no-action","link":"#","open_link_in_new_window":1},"default_style":{"opacity":1,"border_radius":50,"background_color":"#000000","background_opacity":0.4,"border_width":0,"border_style":"solid","border_color":"#ffffff","border_opacity":1,"fill":"#000000","fill_opacity":0,"stroke_color":"#ffffff","stroke_opacity":0.75,"stroke_width":0,"stroke_dasharray":"10 10","stroke_linecap":"round","use_icon":0,"icon_type":"library","icon_svg_path":"","icon_svg_viewbox":"","icon_fill":"#ffffff","icon_url":"","icon_is_pin":0,"icon_shadow":0},"mouseover_style":{"opacity":1,"border_radius":50,"background_color":"#ffffff","background_opacity":0.4,"border_width":0,"border_style":"solid","border_color":"#ffffff","border_opacity":1,"fill":"#4df936","fill_opacity":0.4,"stroke_color":"#ffffff","stroke_opacity":0.75,"stroke_width":0,"stroke_dasharray":"10 10","stroke_linecap":"round"},"tooltip_style":{"border_radius":5,"padding":20,"background_color":"#000000","background_opacity":0.9,"position":"top","width":300,"height":200,"auto_width":0,"auto_height":1},"text_style":{"title_color":"#ffffff","title_font_size":18,"title_font_family":"sans-serif","title_font_weight":700,"title_line_height":24,"text_color":"#aaaaaa","text_font_size":12,"text_font_family":"serif","text_font_weight":300,"text_line_height":16},"tooltip_content":{"title":"Lorem Ipsum","text":"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."},"points":[{"x":1.7543859649122806,"y":1.8181818181818181},{"x":100,"y":0},{"x":100,"y":98.18181818181819},{"x":22.807017543859647,"y":100},{"x":22.807017543859647,"y":89.0909090909091},{"x":0,"y":89.0909090909091},{"x":0,"y":47.27272727272727}],"vs":[[148.3644859813084,53.41121495327103],[214.8317757009346,52.22429906542056],[214.8317757009346,116.3177570093458],[162.60747663551402,117.50467289719626],[162.60747663551402,110.38317757009347],[147.17757009345794,110.38317757009347],[147.17757009345794,83.08411214953271]]}]});
});
})(jQuery, window, document);
</script>
我找到了＆＃34;数据开放点＆＃34;在链接的JS文件中，我只是知道如何修改它以便在悬停时工作而不是单击此处是片段。
if (d || (e.unhighlightSpot(), e.hideTooltip()), e.visibleTooltip && "show-tooltip" == e.activeSpot.actions.mouseover && 1 == parseInt(e.settings.general.sticky_tooltips, 10)) {
var o = c.x - e.wrapOffsetLeft,
p = c.y - e.wrapOffsetTop,
q = 0,
r = 0;
e.updateTooltipPosition(e.visibleTooltip, e.visibleTooltipWidth, e.visibleTooltipHeight, o, p, q, r, 20)
}
}), e.wrap.find(".hs-hotspot-spot, .hs-hotspot-rect, .hs-hotspot-oval, .hs-poly-svg polygon").on("touchend", function(c) {
var f = e.settings.spots[a(this).data("index")];
return "follow-link" == f.actions.click && (1 == parseInt(f.actions.open_link_in_new_window) ? b.open(f.actions.link, "_blank") : b.location = f.actions.link), "show-tooltip" == f.actions.click && (e.hideTooltip(), e.activeSpotIndex != d && e.showTooltip(e.activeSpotIndex, 0, 0, !0)), !1
}), e.wrap.on("touchend", function(b) {
return (a(b.target).hasClass("hs-hotspot-container") || a(b.target).is("svg")) && (a(".hs-mouseover").removeClass("hs-mouseover"), e.unhighlightSpot(), e.hideTooltip()), !1
}), a(c).on("click", "[data-open-spot]", function() {
for (var b = a(this).data("open-spot"), c = 0; c < e.settings.spots.length; c++) {
var d = e.settings.spots[c];
d.id == b && (e.hideTooltip(), e.unhighlightSpot(), e.highlightSpot(c), ("show-tooltip" == d.actions.mouseover || "show-tooltip" == d.actions.click) && e.showTooltip(c, 0, 0, !0))
}
})
},
animateHotspotsLoop: function() {
var a = this;
if ("none" != a.settings.general.pageload_animation)
for (var b = 750 / a.settings.spots.length, c = j(a.settings.spots.slice()), d = 0; d < c.length; d++) a.animateHotspot(c[d], b * d)
},
animateHotspot: function(b, c) {
var d = this,
e = a("#" + b.id);
setTimeout(function() {
"fade" == d.settings.general.pageload_animation && e.css({
opacity: b.default_style.opacity
}), "grow" == d.settings.general.pageload_animation && e.css({
transform: "scale(1, 1)",
"-moz-transform": "scale(1, 1)",
"-webkit-transform": "scale(1, 1)"
})
}, c)
},
getEventCoordinates: function(a) {
var b, c, d = this;
return d.touch ? (b = a.originalEvent.touches[0].pageX, c = a.originalEvent.touches[0].pageY) : (b = a.pageX, c = a.pageY), {
x: b,
y: c
}
},
你可以看到大约一半的数据开放点。我的JS不是很好，所以我不确定如何做出改变，但如果有人能帮助我，我会非常感激！
答案 0 :(得分：0)
这将是对imageMapPro的调用，其中包含我的评论中的更改（以及为我的理智而精心打印）：
$("#map").imageMapPro({
"id":4954,
"editor":{
"previewMode":1,
"selected_hotspot":"poly-3692",
"tool":"poly"
},
"general":{
"name":"dan",
"width":1143,
"height":572,
"responsive":1,
"sticky_tooltips":1,
"constrain_tooltips":1,
"image_url":"http://test.ccri.edu/about/floorplans/knight/images/3rd_flr_2013_layout2.png",
"tooltip_animation":"grow",
"pageload_animation":"none"
},
"spots":[
{
"id":"poly-3692",
"type":"poly",
"x":12.876427829698859,
"y":9.130122214234364,
"width":5.919003115264798,
"height":11.412652767792956,
"actions":{
"mouseover":"show-tooltip",
"click":"no-action",
"link":"#",
"open_link_in_new_window":1
},
"default_style":{
"opacity":1,
"border_radius":50,
"background_color":"#000000",
"background_opacity":0.4,
"border_width":0,
"border_style":"solid",
"border_color":"#ffffff",
"border_opacity":1,
"fill":"#000000",
"fill_opacity":0,
"stroke_color":"#ffffff",
"stroke_opacity":0.75,
"stroke_width":0,
"stroke_dasharray":"10 10",
"stroke_linecap":"round",
"use_icon":0,
"icon_type":"library",
"icon_svg_path":"",
"icon_svg_viewbox":"",
"icon_fill":"#ffffff",
"icon_url":"",
"icon_is_pin":0,
"icon_shadow":0
},
"mouseover_style":{
"opacity":1,
"border_radius":50,
"background_color":"#ffffff",
"background_opacity":0.4,
"border_width":0,
"border_style":"solid",
"border_color":"#ffffff",
"border_opacity":1,
"fill":"#4df936",
"fill_opacity":0.4,
"stroke_color":"#ffffff",
"stroke_opacity":0.75,
"stroke_width":0,
"stroke_dasharray":"10 10",
"stroke_linecap":"round"
},
"tooltip_style":{
"border_radius":5,
"padding":20,
"background_color":"#000000",
"background_opacity":0.9,
"position":"top",
"width":300,
"height":200,
"auto_width":0,
"auto_height":1
},
"text_style":{
"title_color":"#ffffff",
"title_font_size":18,
"title_font_family":"sans-serif",
"title_font_weight":700,
"title_line_height":24,
"text_color":"#aaaaaa",
"text_font_size":12,
"text_font_family":"serif",
"text_font_weight":300,
"text_line_height":16
},
"tooltip_content":{
"title":"Lorem Ipsum",
"text":"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
},
"points":[
{
"x":1.7543859649122806,
"y":1.8181818181818181
},
{
"x":100,
"y":0
},
{
"x":100,
"y":98.18181818181819
},
{
"x":22.807017543859647,
"y":100
},
{
"x":22.807017543859647,
"y":89.0909090909091
},
{
"x":0,
"y":89.0909090909091
},
{
"x":0,
"y":47.27272727272727
}
],
"vs":[
[
148.3644859813084,
53.41121495327103
],
[
214.8317757009346,
52.22429906542056
],
[
214.8317757009346,
116.3177570093458
],
[
162.60747663551402,
117.50467289719626
],
[
162.60747663551402,
110.38317757009347
],
[
147.17757009345794,
110.38317757009347
],
[
147.17757009345794,
83.08411214953271
]
]
}
]
});