How To Display Additional Information By Clicking Image Components? Easy And For Free (WP, SVG)

Share the knowledge...Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Interactive WordPress Section SVG

Intro

My previous tutorial on a similar topic has become pretty popular. It covered how to make clickable and highlighted areas on your image easily and for free and use it in your WordPress website.

Since this topic is in demand I decided to make a further step so that anyone could take even more advantage of using SVG images on your website.

In this tutorial I explain how you can make a sort of an interactive web application right on your WordPress page or in a post. In particular, when clicking an image area you can display additional information nearby the image. The information can be presented in HTML format, i.e. it may contain not just a plain text, but a formatted text with images, hyperlinks and so on.

Like one of my readers wrote in the comments to my previous tutorial:

“The highlight is a nice touch but when the user clicks I want another control to the right of the image to display the proper text.”

So, this tutorial will help to make it possible. And you don’t need to know programming. Although, a basic HTML knowledge is desirable. I’ll show you the very simple way and give you enough details so that you can follow the steps and do what you need. And yes, you can do it for free.


 

Demo

Here’s an example below of what you can do. There is a SVG image which I created by exactly following my previous tutorial with a little tweak. And adding just some lines to your page or post HTML will do the rest.

Just move your mouse over the areas which are pointed at with red arrows. The areas get highlighted. And clicking the areas will open a specified URL. In my example I specified some of the the most popular pages on my website (researches on how hosts fools us, reports on real hosting performance, website security in depth for non-technicals, the opt-in marketing tool of my choice). Make sure you find time to check these pages out.

And, the new part in this tutorial is that the additional information for each highlighted area will display below the image when you move your mouse over these highlighted areas.


 
In this tutorial I will show you how to do it.

By the way, with a tiny tweak in the SVG file, the additional information can be displayed on click, not on moving over.

You can download my SVG image by saving this link. And the code to add to a WordPress post or a page you can find in the section below.

 

The structure of the solution

Before giving you exact tutorial on how to do it, let me show you the structure of the demo. It will help you get the idea if you will want to tweak the solution your own way. Basically, the structure is quite simple:

  1. SVG file. It contains the image, the highlighted areas and the event calls (the instruction calls which need to be done to show the additional information and to change the visibility of highlighted areas). See the previous tutorial on how to create such SVG file.
    And in this tutorial I will just show how to tweak the SVG file for displaying additional information when you move your mouse over the image areas.
  2. WordPress site with installed SVG Support plugin and a small CSS code. The plugin helps to make it possible to use SVG files within WordPress. And the CSS lines help display the SVG image in a responsive way. This part is entirely the same as I described in the previous tutorial.
    If you don’t use WordPress, then what you basically need is to find an alternative solution to SVG Support plugin.
  3. Several lines of code that you can insert right into an html view of your WordPress page or post. These code lines contain so called event handlers, i.e. the instructions which help display the additional information for the highlighted areas. Technically with these code lines you get an area (div) where the additional information will be displayed, and the javascript functions which put the additional information in that area.
    Don’t worry if some of the words above sound technical to you. You don’t really need to understand the technical terms to follow the tutorial.

Now let’s get to the practical part.

 

Creating SVG image and adding to your WordPress site

This is exactly as described in my previous tutorial except a little tweak in this section> about adding interactivity settings (on-mouse-over and on-mouse-out events).

I suggest opening that section in a separate window or tab for better following this part of the tutorial.


Setting interactivity to the SVG image

As you followed the previous chapter and you are on your way creating your SVG image and highlighted areas, you can apply interactivity for the areas. This chapter is about how you can do it.

In addition to making the areas highlighted or transparent when you move your mouse over or out of the image areas (which is fully explained in my previous tutorial), you also need to make the additional information displayed (e.g. below the image like in my example).

You may have as many interactive areas as you need. And in my tutorial I will show you an example with just one area. The same procedure will apply for other areas.

Here is what you need to do for a selected area (which is an object in Inkscape). Add the following commands in the onmouseover and onmouseout fields (they are located in Inkscape at Object Properties tab / Interactivity section):

  1. this.style.opacity=1; onMouseOverHosting();

    Put this command line in the onmouseover field (see screenshot below).

    It contains two commands. The first one (“this.style.opacity=1;”) sets Opacity to 100%, i.e. it makes an object visible. You need it when user moves a mouse over the object. This is the same command as in my previous tutorial.

    The other command (“onMouseOverHosting();”) calls a function.
    You can make up your own name for the function (for example “displayArea1();”).
    This function will display the additional information in your WordPress content for the selected image area.

    By the way, if you want to display the additional information when a user clicks on the area (and not when a user hovers over the area), you can put the function call to onclick event field (not to onmouseover event field).
  2. this.style.opacity=0; onMouseOutHosting();

    Put this command line in the onmouseout field (see screenshot below).

    It also contains two commands. The first one (“this.style.opacity=0;”) sets Opacity to 0%, i.e. it makes an object invisible (totally transparent). You need it when user moves mouse out the object. This is the same command as in my previous tutorial.

    The other command (“onMouseOutHosting();”) calls a function. This is the difference with the previous tutorial.
    By the way, you also can make up your own name for the function (for example “onMouseOutArea1();”).

    In my example this function does nothing. But you can make it that the function will clear the additional information for the area (object). Thus, you can either leave the additional information or remove it when a user moves the mouse out of the area (object).

Further in this tutorial I will show you what code exactly (the body of the functions) you can use in your WordPress post or page.


Specifying javascript functions on events in SVG

Adding onmouseover and onmouseout events

As you have specified the command lines for onmouseover and onmouseout events, you can go on with the previous tutorial from this section and continue making your areas clickable if you need.

Also, the other parts of the previous tutorial apply exactly. You add your SVG file to your WordPress website, install and setup Support SVG plugin and add CSS code that provides correct scalability of your SVG image according to the previous tutorial.

Thus, so far the only different part compared to the previous tutorial was the different command lines specified for onmouseover and onmouseout events.

 

Adding the code for displaying additional information for highlighted SVG areas

This chapter is about adding the code of the functions and the code of the area for displaying additional information for the highlighted areas of your SVG image.

In order to complete adding interactivity to your SVG image inside your WordPress post or page you need to add a code to the post or the page.

For your understanding, the code contains basically three parts:

  1. The section on your page where the additional information for the highlighted SVG areas will display.
  2. The hidden sections with the HTML content which contain the additional information for each of the highlighted areas.
  3. Javascript code that manages the interactivity of your SVG image (displaying the additional information for the highlighted SVG areas).

Below I will show you the two examples of code:

  • The first example contains the code for my SVG image with only one interactive area coded. I will use it for explaining the parts of the code.
  • The second example contains the code for my actual SVG image with all interactive areas coded. Exactly this example you saw above

Explaining the code that adds interactive additional areas in your WP content

The following code example for my SVG image with only one interactive area coded. I use this example for explaining what this code does, so that you could modify it easily according to your needs. You can simply copy this code and modify it as you need.

<div id="mycontent"></div>


<div id="infoHosting" style="display:none">
<strong>Fast and reliable hosting</strong>

<em>It's a critical infrastructure for your online business.
Click the rocket to see the recommended hosts.</em>
</div>


<style>
#mycontent {
	border: 1px solid #E9E9E9;
	padding: 15px;
	background-color: #E1E3FF;
	color: #414141;
	line-height: 23px;
	min-height: 180px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
} 
</style>

<script>
function onMouseOverHosting() {
  var html = document.getElementById("infoHosting").innerHTML;
  document.getElementById("mycontent").innerHTML = html;
}
function onMouseOutHosting() {
  var html = "";
  //document.getElementById("mycontent").innerHTML = html;
}
</script>

And here is below the explanation of the code. Please note that the screenshots below have the code lines word-wrapped if it does not fit into one line, so that you could see the whole code. But when you add the code to your post or page, you need to put it onto one line if required (like on the example above.)

The section for displaying additional information for the highlighted SVG area

The section for displaying additional information for the highlighted SVG area

You need to put this line on your page or post where you want the section with the additional information appear for the highlighted SVG area. In my example I put this section (div) right below the SVG image.

The following piece is the content container with the additional content for the highlighted SVG area. This container invisible because it’s not needed to display implicitly. It’s used by the javascript that I explain below. The javascript takes the HTML content of this container and puts it into the section for additional information.

The content for the additional information for the interactive SVG area

The content for the additional information for the interactive SVG area

If you have multiple highlighted areas, you need to create multiple code pieces like that. Just copy the piece (from

to

) and specify unique ID for it.

The code specifies the style of the section with the additional information

The code specifies the style of the section with the additional information

If you want to modify the style (colors, sizes etc) of this section, then you may need to look for the properties you need in the Internet (for example, you can start from here). This code piece is basically a CSS.

The following piece code is javascript.

The Javascript for an interactive area which fills and clears the additional information section

The Javascript for an interactive area which fills and clears the additional information section

You can put the javascript wherever you want on your page.

Please note that javascript has a quite sensitive syntax. And if you edit it and find out that it stopped working whereas the code seems correct, then you might have made a syntax error (e.g. added an empty line or a line break, forgot ”;” etc).

And finally, in case you are a bit lost in naming functions and DIV sections, here’s a combined screenshot with color markup that will help you see which names should match (you can click it to enlarge):

Matching the names for svg interactivity

Matching the names

Example of my code to add to WP content for interactive SVG areas

This is the exactly code that I use on this page for my SVG image with multiple interactive areas. If you want, feel free to copy it, modify and use it.

<div id="mycontent"></div>


<div id="infoHosting" style="display:none">
<strong>Fast and reliable hosting</strong>

<em>It's a critical infrastructure for your online business.
Click the rocket to see the recommended hosts.</em>
</div>


<div id="infoAudience" style="display:none">
<strong>High opt-in conversions and loyal subscribers</strong>

<em>Your audience is why your business exists and flourishes.
Click the people to see the recommended tool for getting more loyal audience for your website.</em>
</div>

<div id="infoSecurity" style="display:none">
<strong>High-resistant website security</strong>

<em>Protection of your website is one of the most important aspects of your online business.
Click the pentagon fence to see the detailed article with practical approach on website security.</em>
</div>


<div id="infoMonitoring" style="display:none">
<strong>High-frequency non-stop performance monitoring</strong>

<em>Keeping a close eye on your website performance is important. Frequent downtime and slowness will harm your online business.
Click the radar to see the report on how 15 hosts performed since February 2016. The uptime and speed of the hosts have been checked in a non-stop manner (24/7) all these years.</em>
</div>


<div id="infoResearch" style="display:none">
<strong>Research for better decisions</strong>

<em>Doing your own research will help you find the fast and reliable hosting. Click the observatory to read the articles which will help you find the real star and avoid blackholes among hosing providers.</em>
</div>

<style>
#mycontent {
	border: 1px solid #E9E9E9;
	padding: 15px;
	background-color: #E1E3FF;
	color: #414141;
	line-height: 23px;
	min-height: 100px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
} 
</style>

<script>
function onMouseOverHosting() {
  var html = document.getElementById("infoHosting").innerHTML;
  document.getElementById("mycontent").innerHTML = html;
}
function onMouseOutHosting() {
  var html = "";
  //document.getElementById("mycontent").innerHTML = html;
}
function onMouseOverAudience() {
  var html = document.getElementById("infoAudience").innerHTML;
  document.getElementById("mycontent").innerHTML = html;
}
function onMouseOutAudience() {
  var html = "";
  //document.getElementById("mycontent").innerHTML = html;
}
function onMouseOverSecurity() {
  var html = document.getElementById("infoSecurity").innerHTML;
  document.getElementById("mycontent").innerHTML = html;
}
function onMouseOutSecurity() {
  var html = "";
  //document.getElementById("mycontent").innerHTML = html;
}
function onMouseOverMonitoring() {
  var html = document.getElementById("infoMonitoring").innerHTML;
  document.getElementById("mycontent").innerHTML = html;
}
function onMouseOutMonitoring() {
  var html = "";
  //document.getElementById("mycontent").innerHTML = html;
}
function onMouseOverResearch() {
  var html = document.getElementById("infoResearch").innerHTML;
  document.getElementById("mycontent").innerHTML = html;
}
function onMouseOutResearch() {
  var html = "";
  //document.getElementById("mycontent").innerHTML = html;
}
</script>
 

And this is how I put the code displayed above into the HTML code of my WordPress post:

svg interactivity code in WP

Added code for the section with the additional information

svg interactivity code in WP part2

Added code for the interactivity

That’s it!

And by the way, if you want to share with me and others what you could do using my tutorial, we’ll be happy to check it out! You are welcome to post the link to your page with your SVG image in the comments below with your notes!

 

Conclusion

Adding interactivity to your WordPress content often requires either paid plugins or coding skills. I wanted to show you a free and easy way to do what many website owners need.

And I hope this article will help you to save some money and overcome the difficulties with a bit of coding that is required for this interactive functionality based on SVG image.

Subscribe to Free Researches
Get smarter and work on your blog and small business more efficiently

subscribe
BTW, I respect your privacy, and of course I don't send spam, affiliate offers or trade your emails. What I send is information that I consider useful.

Share the knowledge...Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

It's important for me to know what you think

*