Interactive images

[tomh10]

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.

[BenPleysier]

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.

[tomh10]

Thanks Ben

[osgood_]

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.

[tomh10]

Thanks.

[Nancy OShea]

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