Hotspot indicators not lining up with correct coordinates

Forum|Forum|3 years ago
May 12, 2022
4 replies
365 views

Hi guys,

First time here and hoping someone can help as this has been doing my head in recently.
Creating image maps and using hotspots, old-hat I know but we're waiting for a new website and have to make do with this for now.
My problem is, when creating hotspots, the actual hotspot is in the correct coordinates, but the blue circle that indicates a hotspot is in a totally different place. (See image for what I mean)
I've tried different display sizes, different image sizes, uninstalling, reinstalling and updating Dreamweaver, so I can only assume there's a setting somewhere that I've missed?
Any help would be greatly appreciated.

Thanks

This topic has been closed for replies.

Nancy OShea

Community Expert

Your hotspots are very tiny. Probably too small for an average human finger tip to reach with any accuracy.

Factoring for browser and display variations, pixel perfect web design is unrealistic. It might be suitable for print where page sizes are fixed and unchanging, but it doesn't work well on screen.

You might want to have a sit down meeting with your project manager and stakeholders about how this schematic will be used on the web. IMO, something this complex would be better as an interactive PDF rather than HTML. Something to think about.

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

I'd be able to tell more if I could see the entire DW workspace, but it looks to me like you might have one of a couple things happening....

1. You could be using standard image maps on a responsive image and your Design View window is now larger than it was when the hotspots were created. That's one major problem with using standard Image Maps these days, they aren't responsive and don't scale as your image does. This makes the hotspots drift out of place, either being left behind when the image grows (what your screenshot looks like), or ending up completely off the image when it shrinks. There's nothing in pure html that will make image maps work correctly, you would need to find a "responsive image map javascript" (of which there are many) and add it to your page, or switch to using an interactive .svg instead of the graphic/image map you have now.

2. The link to the image was changed to a larger graphic and the maps weren't adjusted. This one is less likely because you say they do appear correctly online.

More info, a link to your page in progress maybe, would help find the exact culprit, be it a code error, old methods, or just a DW display glitch.

R

RSWhite92Author

Participant

It's a new map, I'm creating all the hotspots now, it's for a schematic image, so click on a numbered hotspot, brings up the correct listing on the schematic. All images are the same size using a template so I wouldn't have thought it would be an issue to do with either point 1 or 2, it's looking more like it's a display glitch on DW itself, it's a pain and makes things a little longer, but the coordinates are still correct, so it's not the end of the world.

Thanks for the reply.

Nancy OShea

Community Expert

See this related discussion from a few days ago.

https://community.adobe.com/t5/dreamweaver-discussions/hotspots-broken/td-p/12931272

Basically, use Design view to edit map hotspots.
Use Live view to check display.
Use real browsers to test.

But I still say old school image maps are a bad idea. SVG is better.

Good luck with your project.

Nancy O'Shea— Product User & Community Expert

B

Ben M

Community Expert

Design view cannot always be trusted. So long as the coordinates are correct and it works properly in a browser I would not worry about what design view shows you.