Possible to integrate with a "usemap" behavior?

[dcasey160]

Hello, we love this plugin, but are stumped now trying to add a usemap behavior:

<img id="magnify-pace" src="images/pace_interactive_v1_smaller.png" alt="Sample image" class="zoom img-responsive" data-magnify-src="images/pace_interactive_v1_larger.png" usemap="#interactive" width="3000" height="1536"> <map name="interactive"> <area shape="circle" coords="195,520,130" href="/learn_v2.cgi#aerosols"> <area shape="circle" coords="2410,950,130" href="/learn_v2.cgi#aerosoloptical"> </map>

We'd like to go to a second page when clicking in the map shapes, but aren't able to figure it out so far.
We've tried to add some code in jQuery.magnify.js like:

$lens.attr('usemap','#interactive');

but it doesn't "enable" the usemap behavior. I tried to add an onclick on the lens, sending the click on to the unmagnified img with the usemap:

$("#magnify-pace").click();

but that isn't effective either. Any advice would be appreciated! Thank you.

[thdoan]

Are you saying you want to be able to click on parts of the image to navigate while you are magnifying?

[dcasey160]

Yes, the image has some "hotspots", if the user clicks on one we'd go to a second page to a corresponding id.
If we put the whole zoom image in an <a href> tag, a click will go to this second page no problem, but trying it with the hotspots (usemap) instead is where we are stuck. Thank you.

[thdoan]

Thanks for bringing this to my attention. This has been fixed and a working demo is available here:

http://thdoan.github.io/magnify/demo-map.html

[dcasey160]

Tom, thank you! Your fast turnaround is amazing.

Daren

On Tue, Oct 18, 2016 at 7:37 AM, Tom Doan [email protected] wrote:

Thanks for bringing this to my attention. This has been fixed and a
working demo is available here:

http://thdoan.github.io/magnify/demo-map.html

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#25 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AT0faL3RpvE83RHPmoTlowUyqiL9B-qiks5q1K-NgaJpZM4KZWqo
.