Interactive images

Forum|Forum|5 years ago
June 3, 2020
3 replies
554 views

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.

This topic has been closed for replies.

Nancy OShea

Community Expert

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— Product User & Community Expert

O

osgood_

Legend

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.