Map field?

[gunzelguy]

I've never done an imagemap in Dreamweaver (did heaps of them in GoLive)

I'm using this document 

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

It says that when I select the image and expand properties I should get a map field but this is what my properties look like when I select the image. Where is this map field that the tutorial speaks of?

[gunzelguy]

After messing about I found I got the map field up by toggling from Split to Code view. I then went back to split (after all, I've got to see the image to draw hotspots) the map field stayed up after I went back to Split view but none of the tools work. If I click on the "rectangle hotspot tool" and then go to my image and click, the map field and tools disappear! The image is a jpg and yes, I have given the image a name in the map field. Is this a bug or am I doing something wrong?

[Nancy OShea · Accepted solution]

For Image Maps, switch the Document Toolbar to Design from Live View.

Incidentally, old fashioned image maps are not responsive.  Use another approach.

[gunzelguy]

Thanks for that Nancy, that certainly fixed the problem. It would have been nice if Adobe included this essential info in their tutorial!

Is there a way to get rid of the blue bounding box on the image in the browser after its been clicked?

What is the modern way of doing an image map?

Thanks again

[Nancy OShea]

1. Owing to the rapid release cycle these days, many tutorials are outdated.  Just remember, Live view cannot do everything.  If something doesn't work, switch to Design.

2. The blue outline is for web accessibility.  You can remove it with CSS.

#Map area, img[usemap], map area {outline: none;}

3. Use SVG code instead of HTML.

• https://www.creativebloq.com/netmag/create-responsive-svg-image-maps-51411831
• https://jsfiddle.net/NancyO/6k3v4ge1/latest/