Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

image map works in Chrome, but not FireFox or Edge

  • 4 replies
  • 1 has this problem
  • 2 views
  • Last reply by jrdiebel

more options

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.

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.
Attached screenshots

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 👍 1

All Replies (4)

more options

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

more options

I replaced "rwdImageMaps jQuery plugin v1.5" with "rwdImageMaps jQuery plugin v1.6" Now all 3 browsers fail. All help much appreciated!

more options

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.

more options

All 5 versions working in all 3 browsers. Many thanx, Much appreciated!