Highlighted

How to make hotspots

New Here ,
Jun 05, 2020

Copy link to clipboard

Copied

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.

TOPICS
How to

Views

440

Likes

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

How to make hotspots

New Here ,
Jun 05, 2020

Copy link to clipboard

Copied

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.

TOPICS
How to

Views

441

Likes

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
Jun 05, 2020 0
Adobe Community Professional ,
Jun 05, 2020

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Jun 05, 2020 1
Adobe Community Professional ,
Jun 06, 2020

Copy link to clipboard

Copied

Switch to Design View (see screenshot).

Document Toolbar > Design ViewDocument 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/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Jun 06, 2020 0
New Here ,
Jun 07, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 07, 2020 0
Adobe Community Professional ,
Jun 07, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Jun 07, 2020 0
Participant ,
Jun 07, 2020

Copy link to clipboard

Copied

'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

 

 

Likes

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
Reply
Loading...
Jun 07, 2020 1
New Here ,
Jun 07, 2020

Copy link to clipboard

Copied

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: Link code.png

Likes

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
Reply
Loading...
Jun 07, 2020 0
New Here ,
Nov 06, 2020

Copy link to clipboard

Copied

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??

Likes

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
Reply
Loading...
Nov 06, 2020 1