Highlighted

Interactive images

New Here ,
Jun 03, 2020

Copy link to clipboard

Copied

Hi. I am creating a simple html website using Dreamweaver and I would like to create an image where the user can click on an icon within the image and a pop out window will be displayed with some information (for example a map of the world, and if you click on a Country a pop out box will appear with some data)

I've looked at using Adobe XD but not sure how/if its possible to implement XD content into HTML pages.

Would anybody have any suggestions as to what software would be best for this??

Thanks.

Views

338

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

Interactive images

New Here ,
Jun 03, 2020

Copy link to clipboard

Copied

Hi. I am creating a simple html website using Dreamweaver and I would like to create an image where the user can click on an icon within the image and a pop out window will be displayed with some information (for example a map of the world, and if you click on a Country a pop out box will appear with some data)

I've looked at using Adobe XD but not sure how/if its possible to implement XD content into HTML pages.

Would anybody have any suggestions as to what software would be best for this??

Thanks.

Views

339

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

Copy link to clipboard

Copied

You can use Dreamweaver for this.

 

This is the concept https://www.w3schools.com/html/html_images_imagemap.asp

 

The problem with the concept is that it is not responsive, meaning that, if designed for desktop screens, it will not work for henheld devices.


Ben

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 03, 2020 0
New Here ,
Jun 03, 2020

Copy link to clipboard

Copied

Thanks Ben

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 03, 2020 0
LEGEND ,
Jun 03, 2020

Copy link to clipboard

Copied

If its a map of the World, showing many countries, then that is going to be quite a complex graphic so it probably would not be suitable for responsive devices anyway so Bens solution should work for you on desktop devices.

 

If its more of a simple stylised map of the world with bullet point/icons to show where a companys offices are located then it will most likely work on moblie devices and would need a different approach to the one Ben has suggested.

 

Also both can be adapted to have a pop-up window open over the map, rather than opening a seperate page.

 

 

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 03, 2020 1
New Here ,
Jun 03, 2020

Copy link to clipboard

Copied

Thanks.

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

Copy link to clipboard

Copied

This sounds a lot like an interactive infographic. 

https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals

 

Theoretically you could create the map in Illustrator or other vector graphics app, export it as SVG and then manually program the interactive elements in DW with JavaScript and CSS animations. 

 

Unlike raster images (JPG & PNG), SVG are pure XML code thus searchable, printable, zoomable and scalable without quality loss.

https://www.w3schools.com/graphics/svg_intro.asp

 

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 03, 2020 1