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

403

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

404

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
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...
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.com

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...
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...
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.com

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...
Explorer ,
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...
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...
Resources
Learn Resources
Add a group