maphilight with zoom & drag about imagemapster HOT 3 CLOSED

I think it has to do with the DIV order. Canvas objects are in front of the image (the image is copied in the background of the parent div, as far as i see) and those canvas objects are blocking scrolling interaction with jquery zoomable. If i deactivate the background image and set the opacity of the image to 1, i am able to zoom the image area, and i can even drag the image, not the area though. Any idea how this issue can be solved?

from imagemapster.

Hello, thanks for using the plugn! I am not aware of any problem with jQuery-UI, I actually use it on the first demo on my demo page, so maybe that's just coincidental to the problem with the zoom plugin?

When ImageMapster is first bound, it creates a div which wraps the image, and adds the canvases (two, one for highlights, one for selected areas) before the image (to ensure z order is correct and the image map responds). The image itself is made invisible, and must be so, in order to allow the image to have the highest z-index, and also allow the highlights to be visible. The image must be the highest priority element, in order for it to respond to mouse events, but it also must be invisible in order for the canvases behind it to show. This is why this whole game of making the div with the background is necessary.

The canvases shouldn't block interaction with the image itself - since it has the highest priority. But it is also invisible, of course. Maybe this is the issue, in that you're trying to use the DIV as the zoom source for the plugin, but since the div is in the background it doesn't ever respond to mouse events?

If you can post an example somewhere, ideally set up a simple jsfiddle, I could take a look and see if I can find some easy workaround. If the "zoomable" plugin is configurable in any way perhaps in can be told about the alternate image sources?

Another alternative is that you could capture mouse events from ImageMapster's event hooks (you can configure option to capture the mouseover/mouseout/click events which it will pass on) and call Zoomable programatically if it can has such an API. Or perhaps Zoomable allows specifying a different source for the image versus the events. Either one I would think could be added to that code without too much trouble, if not, but unfortunately there is no obvious change to ImageMapster that I can think of to make this work directly.

You might also look at Ivan's code here: http://brickell-realty.com/im-test.html

There's a lot of discussion about what he's doing in a couple of the other issue threads, but he has implemented a zoom successfully. However I think he's using a commercial product (magiczoom) so this may not be directly relevant to what you're trying to do.

Anyway I would be glad to try to work through this with you, and if there's anything reasonable I can change in imagemapster to make it work, I will try to do so.

from imagemapster.

Closing this issue- if you have any more feedback let me know.

from imagemapster.