• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Hotspot indicators not lining up with correct coordinates

New Here ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

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

TOPICS
Error , How to , Interface

Views

101

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

See https://helpx.adobe.com/au/dreamweaver/using/image-maps.html

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

It's definitely looking like it's more of a graphics glitch. A pain, but not the end of the world, thankfully.

 

Thanks for the reply.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 12, 2022 May 12, 2022

Copy link to clipboard

Copied

LATEST

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines