twitter logo linkedin logo facebook logo youtube logo instagram logo search icon star icon
  • Products
    • Info Point
    • Info Point Extender
    • Info Point Solar
    • Solar-powered Extender
    • Full-Service Consultancy
    • Touchscreen tablet
    • Wireless webcam
    • Event kit
    • All products
  • Case Studies
  • Knowledge hub
    • How it works
    • FAQs
    • How to videos
    • Guides
    • Troubleshooting
    • About us
    • Knowledge hub
Call us on 01773 432303 Get in touch
Company logo
  • Products
    • Info Point
    • Info Point Extender
    • Info Point Solar
    • Solar-powered Extender
    • Full-Service Consultancy
    • Touchscreen tablet
    • Wireless webcam
    • Event kit
    • All products
  • Case Studies
  • Knowledge hub
    • How it works
    • FAQs
    • How to videos
    • Guides
    • Troubleshooting
    • About us
    • Knowledge hub
Get in touch

Creating an interactive image

Create your own interactive Info Point map or floor plan following this tutorial

14 November 2022
  • Home
  • Guides
  • Creating an interactive image

An interactive image has hotspots that link to other content. For Info Point we often use them to provide clickable points of interest on a self-guided tour. This guide is intended to show you how to add links to existing imagery.

interactive church tour floor plan of St Barnabas Church, Brampton Bryan

Before we start it is important to note that you can’t add hotspots to a JPG or PNG. The format needs to be a scalable vector graphic (SVG), which is a very flexible file type supported by most modern browsers. Creating and editing SVG files can seem like a daunting task and can become quite complicated if the drawing is very detailed but it is the ideal format for displaying simple interactive maps and plans, as shown in the example above from St Barnabas Church in Brampton Bryan. Please note: the numbered hotspots won’t work because the SVG is programmed to open links on an Info Point.

Infinite scaling, no resolution loss

An SVG allows for infinite scalability with no loss of resolution. This means that you can use crisp, colourful graphics that can be magnified without becoming pixellated. SVG is written in extensible markup language (XML) that uses tags similar to HTML. This means that you can open an SVG file in a text editor and add tags for increased functionality such as adding hyperlinks.

If this all sounds like gobbledegook then why not speak to us about creating an interactive image on your behalf.

Creating a SVG

Although it is possible to write an SVG in a text editor, by far the most practical way of making one is by using graphics software and saving to .svg format. If you have a graphics or design department making your imagery then ask them to provide you with the files in .svg format. If you are making your own images, programmes such as Adobe Illustrator and CorelDraw are widely used, but licensed, whereas Inkscape is a free vector drawing programme that supports the format. This guide does not show you how to make your own graphics from scratch but it is worth investing time to learn one of the graphics packages referred to above. Please be aware of your organisation’s policy on software and any licensing requirements before installing any graphics software.

When a SVG is opened in a text editor such as Notepad (windows) or TextEdit (mac) it will look something like this (you can download the St Barnabas church tour floor plan above by right clicking on it).

 

svg opened in a text editor

This shows the vector image as it is written in XML. This will vary in complexity and layout depending on the SVG and the programme used to save/export it but it will always follow a logical set of tags for each element. In this example the points of interest that we want to make interactive are green circles. In the XML this is written as:

<circle class=”cls-5” cx=”243.62” cy=”546.34” r=”40.46”/>
      <text class=”cls-6” transform=”translate(229.59 565.08)”><tspan x=”0”
y=”0”>1</tspan></text>

Don’t worry too much about what it all means as you don’t want to alter the appearance of the circles. You are just aiming to identify the bit of text that you will be adding your own tags around. Now notice what is written around the XML describing the circle:

<a href=”/p/tour-1-rogers-family-tablet”>
      <circle class=”cls-5” cx=”243.62” cy=”546.34” r=”40.46”/>
      <text class=”cls-6” transform=”translate(229.59 565.08)”><tspan x=”0”
y=”0”>1</tspan></text>

</a>

In HTML this <a> tag is known as a hyperlink and means that whatever is tagged becomes a button taking you to the location described in the href. In this case it is the location of another page on the PlaceMaker Content Management System. By adding these tags and incorporating the correct paths you can add interactivity to your own graphics.

Tutorial

1. Tap this link to open a SVG of a green button in your browser. When you click on the button nothing happens.

2. Now right click the link above and save it locally to your computer.

3. Open the SVG in a text editor. You may need to right click the file to choose which application to open it with. You will see it has a a very short bit of code as it is a simple graphic. The part we are interested in is within the <g> or group tags.

<g>
<circle fill="#61873F" cx="68.3" cy="74.1" r="54"/>
<text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#FFFFFF” font- family=”Arial” font-size=”24px”>Press</text>
</g>


4. Now we will add the <a> tags required to turn the graphic into a link. Your code should look like this:

<a href="">
<g>
     <circle fill=”#61873F” cx=”68.3” cy=”74.1” r=”54”/>
     <text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#FFFFFF” font-
family=”Arial” font-size=”24px”>Press</text>
</g>
</a>

5. Now lets add the URL that we will be taken to when we click the graphic:

<a href=”https://www.w3schools.com/graphics/svg_intro.asp”>
<g>
     <circle fill=”#61873F” cx=”68.3” cy=”74.1” r=”54”/>
     <text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#FFFFFF” font-
family=”Arial” font-size=”24px”>Press</text>
</g>
</a>

6. Save and close the SVG in notepad and open it again in the browser. When you hover over the button the cursor should turn into a pointing finger. If you click on the button it should take you to the W3Schools SVG Tutorials page.

Thats it. The key difference between what you have just done and what works on Info Point is that Info Point is not connected to the internet so the link you use in the <a href=””> tag will be another page on the Info Point site rather than a web address and therefore will have this format <a href=”/p/slug-name”>. The slug is the unique name you give to each page. It is preceded by /p/ as part of the identifier. If you connect to your Info Point and browse as a visitor would you will see the slug in the browser address bar.

Extra tutorial

Calling the button ‘Press’ might a little confusing so lets change it to read ‘Click’. We could open it up in a graphics programme to change the word but we could do it using notepad instead.

1. Open the SVG in notepad and find this bit of code:

     <text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#FFFFFF” font-family=”Arial” font-size=”24px”>Press</text>

2. Change the word Press to Click

<text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#FFFFFF” font-family=”Arial” font-size=”24px”>Click</text>

3. Let’s make the font orange as well. Locate the part of the code relating to the font fill:

<text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#FFFFFF” font-family=”Arial” font-size=”24px”>Click</text>

4. Change it to an orange colour. This way of writing colours is known as HEX code. Each colour has its own six digit alphanumeric code :

<text transform=”matrix(1 0 0 1 38.6042 80.347)” fill=”#f7931e” font-family=”Arial” font-size=”24px”>Click</text>

5. Now save and close the SVG in the text editor and open it up in the browser,. It should read Click and look great (sort of). Try changing other values and see what happens – can you make the circle smaller and coloured blue?

This guide was written by Ian Atkins, Graphics Office, Wessex Archaeology.

Useful links

  • inkscape.org 
  • w3schools.com svg_intro
  • w3schools.com hex color picker
  • PlaceMaker CMS
  • CMS How to videos

Share this article

Connect with us...to connect with your visitors. Anywhere.

Get in touch Stay in touch
  • Products
  • Info Point
  • Info Point Extender
  • Outdoor digital signs
  • Solar essentials kit
  • Event kit
  • Sectors
  • Places of worship
  • Outdoor sites
  • Creatives
  • Museums and heritage sites
  • Knowledge hub
  • How it works
  • FAQs
  • About us
  • How to videos
  • Our tweets
  • Terms & conditions

Get in touch

  • Wildfi Ltd
  • 40 Strettea Lane
  • Higham
  • Derbyshire
  • DE55 6EJ
  • United Kingdom
  • Company number 12891678
  • Tel: 01773 432303

Vat number 366815369

©2023 - Wildfi | All rights reserved

  • Privacy Policy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT