image map works in Chrome, but not FireFox or Edge
I have an image map that works fine with Chrome. However it fails in Firefox and Edge. It behaves as if the image is bigger, and therefore all mappings are incorrect. Why would different browsers look at the same image, and behave differently?
https://truthrightlydivided.ca/wp-content/uploads/2017/07/TwoRoadsLEB-responsive.html Hover should bring up any verse selected.
Chosen solution
But it looks great on my Firefox. I'm testing in a private window -- private windows do not carry over any cached files or cookies from when I tested earlier (and closed that window). If you are testing in a regular window, please try doing a reload bypassing the cache: Ctrl+Shift+R or Shift+click the Reload button on the toolbar.
Read this answer in context 👍 1All Replies (4)
The natural size of your image is much wider than the browser window: 5722px × 2842px
When it is scaled to fit the browser window, Firefox is still using the assigned coordinates based on the natural image size, and that is why the linked areas no longer match up with the scaled image.
I think the rwdImageMaps jQuery plugin is supposed to work around this, but there is an error message if I resize the body area, so something is going wrong. You could try updating that script from the 2013 version to the 2016 version: https://github.com/stowball/jQuery-rwdImageMaps
I replaced "rwdImageMaps jQuery plugin v1.5" with "rwdImageMaps jQuery plugin v1.6" Now all 3 browsers fail. All help much appreciated!
Chosen Solution
But it looks great on my Firefox. I'm testing in a private window -- private windows do not carry over any cached files or cookies from when I tested earlier (and closed that window). If you are testing in a regular window, please try doing a reload bypassing the cache: Ctrl+Shift+R or Shift+click the Reload button on the toolbar.
All 5 versions working in all 3 browsers. Many thanx, Much appreciated!