All Collections
Interactive Images
Creating Interactive Images
Creating Interactive Images

Easy steps to take when making Interactive Images

Kaisa Kokkonen avatar
Written by Kaisa Kokkonen
Updated over a week ago

When you login to your account you are taken to the My Projects page.   You see all of the projects that you have already created listed on that page. If you have no existing projects you will be directed to the welcome screen which shows you a short description of each project type.  You can start creating an interactive image from either page.

NO EXISTING PROJECTS (any kind of projects) – Click on the Interactive Image Icon to start a new project on the welcome screen. Alternatively you  choose to add an interactive image on projects page, in the bottom right corner you click on the BLUE + icon – choose interactive image.  (Do not worry about naming the project, that will happen later)

Interactive images are great to map information using visual keys.

The best approach is to have great background images with logical hotspots (icons) linking to related information. Add hotspots above characters in a scene to hear them talk. Hotspots could be used in a diagram of the human anatomy or floorplan to give the viewer more information about the various parts/rooms. Creating obvious connections between hotspots and the resources they trigger will make your message clearer and more memorable.

MANAGE SECTION

(section refers to the left sidebar)

Step 1:  Upload your image/Image address

Upload from your device  the image  that you want to use for your Interactive Image project/experience.
Your image can be no larger than 25 MB.

You can upload jpg, png, bmp, gif, jpeg formats. You can also upload any IMAGE link from the internet that uses http or https.  Please note that image link/address is not the same as regular URL.  Right click on an image and use the command copy image address.

URL  This method allows you to use any images already online.  You simply right-click your image and select “Copy Image address”, then paste the link into the photo uploader. If the original image is removed or renamed from its host location your interactive image may cease to function.  Web import also supports SVG images in addition to the types supported by hard drive upload.

Step 2:  Click to add a hotspot

All succeeding features can be found in the left panel. Select an icon that will represent your hotspot. There are multiple icons available  and you have the ability to upload your own icons.

Click to add a hotspot

Step 3: Create content for your hotspot

Select the icon on the left side bar (under show hotspot image) you want displayed on your image. You can change the icon later.

Click anywhere on the image to create a hotspot. Don’t worry about the placement as  you can drag the icon around where you like it to be later. The same works when you want to come back to EDIT. Create the content first.

You can choose to enter a link in the link field (Insert a link to load metadata from the site). 

The hotspot will update to show the open graph text and image for your link.

LAYOUT

You can alter the size of your “popup”, or easily switch to show the plain text link.

  • Banner – Open Graph Link

  • Large Open Graph Link

  • Small Open Graph Link

  • Custom Content Right Aligned

  • Custom Content Left Aligned

Next add a caption. You can add as much text as you need, then use the DilogR editor to format your text in the most suitable arrangement (Caption - title and content).

You can edit the size of icon, as well as what text and links/images or any other content you want to be displayed in the hotspot when your visitors open it/hover over.

In addition to the above options such as using URL (link) that automatically may create you a great looking hotspot depending on the URL (open graph), you have lead capture, add question, call to action, other and hyperlink.

Hotspot Type: (pulldown menu)
CUSTOM
LEAD CAPTURE
ADD QUESTION
CALL TO ACTION
OTHER
HYPERLINK

Do NOT forget to SAVE
(To make a hotspot animated you simply use a .gif instead of a .png or .jpg.)

Advanced settings
Icon dimension:
Width: 36   Height:  36

[default: most used size is 36 for both width and height, most professionals recommend maximum size app. 140×64 pixels]

CUSTOMIZE SECTION

Step 4: Hotspot settings

Hotspot icon settings allows you to choose one of the 3 options when the viewers will see the hotspots. Some users want them to show up all the time - or
some may want to require hovering etc

Option 1: When page loads (show by default but disappear if person hovers then hovers off image)
Option 2: On hover (icons only show on hover)
Option 3: Always show icons (not affected by hover)


PREVIEW

DISTRIBUTE

This is how it will look – see below:

Note: We changed the size you see in the iframe code from height 626 and width 940 to 480 and 640 which works better for this page.  You can do that as well depending what size you need for your page.

Did this answer your question?