Drupal: Aalto.fi website

Interactive hotspots for maps and infographics

The new aalto.fi feature allows you to add image-based interactive content.

Have you thought about making your maps or infographics interactive for users? This new aalto.fi feature makes it possible for you to add images with interactive hotspots (clickable small rounded icons). Hotspots reveal a popup info-box where users access some additional content while staying on the same page. That info-box can contain text, image, audio and video or a combination of those in the same display.

How to make a suitable one

The Digital Experience and Analytics team can guide you through the creative process. This interactive image cannot be created in Drupal but in a third party tool. There are different free tools in the market that allow you to develop this type of graphic at no cost. Once you have your artwork ready, you need to export it as an h5p file. Only high level aalto.fi editors can add the file to the necessary pages through the newly created component H5P Interactive content.

The interactive graphic is supposed to be responsive by default. However, please make sure that the image is working as intended in mobile phones, tablets and desktop computers. In addition, ensure high levels of accessibility if you are going to integrate some text in the image i.e. the font should be of a sufficient size for readers.

Example of a map with interactive hotspots

  • Published:
  • Updated: