Image maps not "sticky"/resizing incorrectly? - RH2019, Version 11

[Spectrum Writing]

I have many images in my project for which I must create an image map.

Some of these images have callouts that were created with the images and the callouts are just Arabic numerals and the map areas are these callouts.

Other images have map areas directly on the images - no callouts.

Each image map area links to a topic. Whatever the situation, when I preview any image with a map defined, and click the indicated area, the map is dead nuts on . . . but if I view the image in actual output in a browser, Chrome, Mozilla, etc. then large swaths of the map are shot to heck in a handbasket . . . so many of the clickable areas of the image are so far removed from the actual locations from which I defined them that it renders the image map useless.

I totally understand that the Preview mode is not a completely accurate representation of the final output, but in this case, there is no correlation at all between where I define my image maps and where they wind up in the output. How on earth do I get properly defined image maps w/ this issue? I have attached a graphic to demonstrate this.

The top image shows the image map in RH. The bottom left shows where the image map should be, but when a cursor is held over it, you can see that the map is not there. Instead, the bottom right shows where the image map somehow winds up after generation. However, where I defined Image map #1 is just fine, but Image maps 3 through 6 also have somehow been "moved/set askew." 

This is a HUGE issue for me as I have an ungodly number of necessary image maps for a very graphic heavy application.

TIA,

TVB

Edited by moderator to make text more digestible and attached image added to body of post.

[Amebr]

There's a few image map issues logged in the bug tracker. A couple are marked as "To Track" which seems to mean Adobe needs more information. This one in particular sounds like it could relate to your issue. Perhaps you can provide more information to help. 

https://tracker.adobe.com/#/view/RH-4040

[Spectrum Writing]

Thank you for that direction Amber. I just added this whole post, and my graphic and also agreed w/ the original poster- image maps in HTML5 are absolutely NOT working!

[Erwin.Timmerman]

I have also noticed recently that image maps seem to shift erratically - on some pictures they do, and on others they don't. I didn't notice this before. Has something changed in recent updates regarding the handling of image maps?

[Spectrum Writing]

Yep Erwin,

 My image maps also have this issue. I have added this to the existing bug that Amber referenced as well. Basically, they are all over the board and not working, no matter what.

Thank you for your comment. At least this confirms that I am not doing something wrong setting mine up.

[gb92818477]

Hi guys, 

experiencing the same errors, we moved on to use *.svg "images" with image maps only. The reasons is, that we found *.png or *.jpg images don't always resize properly if set to other sizes but the 1:1 pixels. After all, the image map feature is just an overlay  to an actual image, and the 

So there may be cases where the underlying image resizes in a responsive output while the coordinates of the original imape map do not, or vice versa.

[Erwin.Timmerman]

I have noticed that the max. image size in the editor is 960. As a workaround, I have made a img.ImageMap style with max-width: 960px;.

That makes the sise of the output the same as that of the editor, and the image map is translated correctly. Of course, this limits the size of your displayed image but in case you're desperate it's better than nothing. 

This was already reported long ago with https://tracker.adobe.com/#/view/rh-6655 but unfortunately release 13 doesn't mention this bug has been solved.