Can't create image maps

[Glenn Pillsbury]

With an image embedded on my page, I click to select it.  The image map tools should appear but they do not.  Only when I click into the html code of the image, in the Code pane, do the tools appear in the Properties palette.  However, even though that have appeared, all I can do is name the image map.  The various drawing tools cannot be selected.  Clicking on one has no effect at all and the pointer tool remains selected.  In effect, it's impossible to actually create an image map/hotspot.

Dreamweaver 21.3.

Below, you can see that I have the image selected in the Design view, but the image map tools are not present.

Am I missing something?

After I click inside the image HTML, you can see that the image map tool cannot be selected.  The pointer tool never 'unselects'.

[Glenn Pillsbury]

Edited to read: "After I click inside the image HTML, you can see the image map tool but the tools cannot be selected.  The pointer tool never 'unselects'.

[Glenn Pillsbury]

It was just an experiment.

[Nayan_Kankariya · Accepted solution]

Hi @Glenn Pillsbury,

Thanks for writing to us. Image maps functionality will work with Design view and not in Live view, hence can you please try switching to Design view by navigating View menu --> Split --> Code-Design and see if the Image maps buttons from Properties Inspector work as expected.

Alternatively you can switch to Design view from the dropdown button on the toolbar as per below screenshot.

Have a pleasant day!

Regards,

Nayan

Dreamweaver Team

[Glenn Pillsbury]

Ah ha! Thank you! Yes I didn’t understand why the interface generally was different from what I’m used to. Now I know I need to disable the “Live” view.

Glenn

[Nancy OShea]

@Glenn Pillsbury 

Switch to DESIGN VIEW (Ctrl + Shift + F11) to edit Image Maps.

NOTE:  image maps are NOT responsive.  The hotspots will invariably drift out of register when the image is rescaled to fit other  devices.  For usability, nobody uses old fashioned image maps anymore.  It's more user friendly to rebuild graphics with CSS styled Text or Button links.   This has the added beneifit of being friendly for search engines and language translators.  See Bootstrap Card examples below.

https://getbootstrap.com/docs/5.0/components/card/

Or you could ceate an interactive SVG infographic in Illustrator.  Below is a crude example of one I coded manually & posted on JSFiddle. 

https://jsfiddle.net/NancyO/6k3v4ge1/51/

Hope that helps.  Post back if you have any questions.

[L e n a]

In parallel with what @Nancy OShea has proposed, and whose point of view I share, I would add two points:

• Using SVG you have the final solution, but your initial question being "How to access the modeling tool for your image map?", by using SVG, and since you have a Creative Cloud account, Adobe Illustrator will become your new SVG interactive imaging tool.

  To do this, launch Ai and create a document the size of your image, import the image, and from layers place as many hot spots as necessary.

  To my knowledge, Ai doesn't allow you to place hyperlinks directly within an SVG document. For that, you'll have to do this from Dw in the code, by adding xlink:href attributes to the appropriate elements, or possibly to new <a> tags.

  Personnaly, I use JavaScript to interact within SVG files, and Ai offers the Layers palette for assigning IDs to objects, and the SVG Interactivity palette for working with listeners placed on external JavaScript files.

• The second point is that in your particular case, we're not talking about a pure pixel-type image, but rather the representation of a brochure made up mainly of text, and depending on your interaction scenario, the interactive image principle may not be appropriate...
  For the simple reason that, even in SVG, your interactive map won't be responsive, in any sense other than a simple adaptation of size... in other words, on a cell phone in portrait mode, the text contained in the image will no longer be humanly legible, if it ever was before, but in any case will never be for a screen reader.

  In this particular case, I'd opt instead, not for an image, but for an HTML structure, allowing the three columns to be displayed horizontally side by side when screen width permits, or vertically one under the other when screen width becomes too minimal. Not to mention the font size used to preserve content legibility by also adapting it to screen size.

[osgood_]

I can't see myself how image maps can be of any positive use in this case. From the graphic posted it looks like most of the information is text based, so use text.......hummm......its just common sense......... but l guess if you haven't been there and done it.......That's what experienced developers are paid for folks, hopefully a few ignorant cheapo, cheapo, clients read this post too!

[Nancy OShea]

hopefully a few ignorant cheapo, cheapo, clients read this post too!

By @osgood_

=======

When clients realize just how poorly old fashioned image maps perform on modern devices, they'll be barking & gnawing like angry pitbulls.   I can't blame clients for their ignorance.  It's not THEIR  job to know this stuff. 

Developers must take charge and do what's best for the majority of site visitors.  Their reputation depends on it.

[osgood_]

I can't blame clients for their ignorance.  It's not THEIR  job to know this stuff. 

By @Nancy OShea

If its being produced at a rock bottom price compared to other quotes they've been presented with they should know something is not quite right, I think. Of course if they are just being ripped off, that's unfortunate.

Because web-development is not regulated it means there are a lot of bad apples in the basket - producing anything just to make a living whilst deceiving those with little knowledge i.e., the client.