Skip to main content
dagj51311967
dagj51311967
Participant
June 5, 2020
Question

How to make hotspots

  • June 5, 2020
  • 2 replies
  • 1292 views

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.

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 6, 2020

Switch to Design View (see screenshot).

 

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/

 

Nancy O'Shea— Product User & Community Expert
dagj51311967
dagj51311967Author
Participant
June 7, 2020

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
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 7, 2020

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.

 

 

Nancy O'Shea— Product User & Community Expert
B
Community Expert
Ben MCommunity Expert
Community Expert
June 6, 2020

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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices