How To Create Interactive Images For A Website

This post will tell you how to create interactive images for your website.

Create An Interactive-img.com Account

In order to create an interactive image first you have to head over to interactive-img.com and create an account.

Create An Interactive-img.com Account


Upload your first interactive image

After the registration you will be redirect https://interactive-img.com/createimage where you can upload your first image.

Upload your first interactive image


Create the hotspots

Create the hotspots by clicking on the image. After a left click on the image a form will appear on the left side where you can fill out the information and describe the hotspot.

Create the hotspots


Copy the embed code

To get the embed code you have to click the "embed image" button. An overlay will appear which contains the code snipped that you have to copy and paste into your cms in order to use the image. There are two options to embed the image with an js/html snippet (recommended) and via iframe. To get the iframe code click on the "alternative iframe integration" link.

Copy the embed code


Embed the image

After you copied the embed code simply paste it with your cms solution for example wordpress.

Embed the image


Done

When you save your edited content / page you should see your first interactive image.

Done


Interactive Image Example


Step By Step Demonstration Video

video-thumbnail