javascript - How do I modify Image Map Pro? -
i'm using plugin called image map plus. high lights hot spot on image when hover on spot. this....
i have list under image. when hover on 1 of list items corresponding hotspot on image it's hover effect. plug in provides function on click not hover... adding list item
<li><a href="#" data-open-spot="poly-3692">3314 administration</a></li>it has do data-open-spot="poly-3692"
the poly-3692 targets hotspot. here js in code.
<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>and found "data-open-spot" in linked js file dot know how modify work on hover instead of click here snippet.
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() { (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 = this; if ("none" != a.settings.general.pageload_animation) (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 } },you can see data-open-spot half way down. js not i'm not sure how make change if can me out appreciate it!
this call imagemappro changes comments (and pretty-printed sanity):
$("#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 ] ] } ] });
Comments
Post a Comment