How to make hotspots

[dagj51311967]

I have used old versions of dreamweaver for years. Now with the DW 2020 I got problems to make hotspots. I have a map in jpg and open this in DW. The map has red dots with numbers. They function with a link when you click on them. But it is impossible to make new hotspots with DW 2020. I want to make a cirkle or square that can be lincked to a url. In photoskop I can make figures, but cant find anything in DW 2020. If I choose anyting to insert it drop to the bottom. Not allowd to put where I want. Please advice? Dag.

[Ben M]

Here's how you insert hotspots in DW ( https://helpx.adobe.com/dreamweaver/using/image-maps.html ).  This has to be done in the old design view so these options will not show up in live view.  It's one of the many nuances of the newer version and the differences that still exist between design view and live view. So while live view was intended to help replace design view, unfortunately there's never been a complete transition away from needing design view for reasons like this.

[Nancy OShea]

Switch to Design View (see screenshot).

Document Toolbar > Design View

Keep in mind that old school image maps are not responsive and should be avoided if possible.  The hotspot regions don't rescale with responsive images resulting in a bad user experience on mobile and tablet devices. 

If you can't avoid using an image map, do it with SVG code.  See my example on JS Fiddle.

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

[dagj51311967]

Hello, thank you for answers. I can use an old version of DW to make hotspot, but as you say try to avoid this. If I want to use the DW 2020 , I make a map in Illustrator and make a vectorised file. How do I place my red dots on the map so I later kan make links fom this red dots? Please advise. Dag

[Nancy OShea]

Do it manually.  SVG is just XML code so it's not difficult to work with. But you will need to clean up the SVG code that comes out of Illustrator / Inkscape first.  See this video tutorial.

[osgood-]

'cx' is x axis and 'cy' is y axis just mess around with the co-ordinates until you have the bullets in the correct place, its trial and error.

cx="120" cy="170"

cx="300" cy="250"

cx="375" cy="500"

etc

[dagj51311967]

Hello, now I think Im close. Need som help to sort out coding. Have put in nubers seen in live wiew 1 to 8, but need to make coding for link. Have one example for 8: 

[Klaas TVE]

You can also use a plugin that is 'recalculating' the location of the hotspots when you resize the image. You can find this Plugin here https://github.com/davidjbradshaw/image-map-resizer that works well. Just read the few paragraphs on the page below the code and follow that and your hotspots will be responsive!

Note that it's important to put the original sizing (width / height) of the image in the img-tag of the HTML to make this work. 

ps: The only problem I have is that the hotspots only work once when I put them in a 'collapse' section of bootstrap. Don't still know why that is but only when I resize the project again in my browser the calculation is done again and the hotspots are working again??