Where’s Waldo?
Namaste!
Your client just asked you to make a map of their store, where the user can click to find out more information about each department. Can you do it? That is the subject of today’s tutorial!I’m electing to accomplish this using SVG graphics. There are several other ways to do this (using <map> for example). Fair warning, I’m using the Adobe suite of products for this tutorial. There are plenty of other products out there that can accomplish the same thing, but you may have a little frustration following along. The first part of this tutorial is generating the SVG with paths. If you can do this, feel free to skip ahead.
There are numerous approaches to this problem. The one I’ve elected to use is called image mapping. It has been around for a number of years and utilizes SVG (scalable vector graphics). The great advantage of SVG is that they are highly scalable. This means they are naturally responsive and look good at any resolution. Image-mapping is a technique where we can define areas on the image that the user can interact with. Because it is part of an SVG, we can style it using CSS (for example :hover) just like any other element. Let’s get started!
In my pretend scenario, my client is a travel agency that is selling tours of Japan and wants a tourist map of Tokyo, along with the sites that can be seen. Here is the demo. First off, select your image. While it can be any image, it is best to pick one that is relatively simple since we will be converting it to an SVG and the way we will be displaying it in Divi can get fussy with huge images. I wanted to push the edge, so I picked a somewhat complicated map of the major areas of Tokyo. It starts this project as a 340kb PNG. First up, bring it into your favorite editor, like Photoshop (PS), but GIMP and Inkscape will both work nicely with outputting SVG. I’ll be talking about PS, but I might go back and give updates for other software later.
First, give your image a reasonable scale and resolution. I chose 800px x 800px with a resolution of 72dpi. Whatever the dimensions, remember them for the next step. Now we have to define our regions of interest. Simple image-mapping can use squares, rectangles, or circles. These are defined by SVG paths that can be as simple as 3 points for a circle (center X, center Y, and radius), or four points for a rectangle (start X, start Y, width, and height). I want the more complicated shapes of the complicated wards of Tokyo. In order to do this, I will select the polygonal lasso tool
and carefully outline the first region of interest. Now, I’ll convert that selection to a path (button located at the bottom of the paths panel 
). After naming that new path, I’ll continue doing this for all the desired areas.
With my regions selected I now have to export my paths to Illustrator. Under the export menu, there is a selection called “Paths to Illustrator”. Elect to export all of the paths.
Moving over to Illustrator, you want to create a new artboard that is a little larger than your image. Given my dimensions, I choose 840px x 840px. This is because different browsers choose how to display SVG a little different. If you have your image pressed up to the edge it will get cut-off occasionally. First, bring your image into the artboard and center it. Next, place your previously saved paths file over the top of the image. If needed, stretch the edges of the paths to fit your image. Now, export the whole thing as an SVG.
This next part is where we need some forethought. What do we want to do with each of the regions? In my case, I want to link out to a Wikipedia page about that ward, and I want a pop-up tooltip identifying the region. I will be using the javascript library, Tooltipster. So, I’ll wrap my SVG Path elements in <a> tags with a class=”tooltip” and for now, a simple title that will pop-up when people mouse-over, using title=””. This library lets you have any HTML as tooltip and I will be going into having tooltips with pictures in a future tutorial.
Open up the saved SVG file with your favorite editor. I use Sublime Text a lot. It is donateware and if you end up using it a lot I encourage you to give back to the developer. First up, check out the header of this file.
There is a lot of info, but you want to make sure that your program set the origin to x=”0px” y=”0px” and that there is an xlink set (note that the xlink starts with “xmlns:xlink”). This will allow you to wrap your path elements in clickable links.Next, either scroll down or do a find for “path”. Like a standard HTML document, there should be an opening <path> tag and a closing </path> tag. Wrap these in <a></a> tags like you would any other link. Since I am adding in a tooltip and a link to Wikipedia, my opening tag is ‘<a href=”wikipedia article link” class=”tooltip” title=”the ward of tokyo outlide by this path”>’. For sake of completeness, I should point out that I am using SVG version 1.1 – this type of link was deprecated as of SVG version 2, but it isn’t something you have to really worry about. Additionally, if you path element has any inline styling, delete it. We will be handling the styling in our child theme styling sheet.
Okay, once all of our paths are wrapped in our link tags we’ll save the file and move over to Divi. Open up a new post or page and elect to use the Divi page builder (back-end). Add in a new section with a code module (If you use the code module ofte, I recommend getting and using my free plugin). Copy and paste the entire code from the editor into the Divi code module and save. If you look by preview, your new image should show up, but most likely each of the path areas will be filled in with black. Also, at this point, there is likely nothing in your style sheet to add hover effects, so let’s fix this.
I am going to assume that you are using a child theme, if not, you really should and there are some wonderful resources out in the Divi world for automatically building them (here and here). Open up your child style sheet and add in the styling you would like. For my purpose I’m going to style each path element with a transparent overlay (instead of the black that is there now) that turns slightly opaque on hover.
path {
fill: rgba(255,255,255,0);
}
path:hover {
fill: rgba(255,255,255,.3);
}
So note that our CSS is a little different for paths than it would be for a <div>, for example. These paths are defining shapes, so we want to “fill” them. Okay, now if we preview our image it should be looking good. When we click it should take us to our wikipedia page and when we hover, the area should change color.
Last up, incorporating a simple tooltip. There are a number of ways to do this, but I’m going to use the Tooltipster library. Head over to the site and download the main library and the CSS for the library. Enqueue these scripts by modifying your functions.php file, or by adding the links in through the Divi Theme options panel. I won’t be covering this here, but I have covered enqueuing scripts before here, and I will be going through it once more in my next tutorial. To make our tooltips appear we need to add one last piece of code. You can choose to either make it a separate file or use a code module. I’m going to use a code module. Add one onto your page and open it up. Put the following code inside.
jQuery(document).ready(function($) {
$('.tooltip').tooltipster({
theme: 'tooltipster-punk',
'maxWidth': 270, // set max width of tooltip box
contentAsHTML: true, // set title content to html
trigger: 'custom', // add custom trigger
triggerOpen: { // open tooltip when element is clicked, tapped (mobile) or hovered
click: true,
tap: true,
mouseenter: true
},
triggerClose: { // close tooltip when element is clicked again, tapped or when the mouse leaves it
click: true,
scroll: false, // ensuring that scrolling mobile is not tapping!
tap: true,
mouseleave: true
}
});
});
As usual, when using the code module, make sure to wrap the whole thing in <script></script> tags. I’m not going to go into too much detail in this tutorial, but I’ll give you enough knowledge to get into trouble until the next tutorial! First, on line 1 we tell the browser not to run the code until the DOM is ready and pass in a “$” so that we don’t have to type out jQuery each time. Next, we invoke our library and tell it to target all DOM elements with a class of ‘tooltip’. Next we pass in several options, which I’ve commented on in the code. I’ll be covering these in detail in the next tutorial.
That is it! Your tourist map should be working. Image-mapping can be used for any type of interactive graphics, only limited by your imagination. As usual, shoot me an e-mail or leave a comment if you want something further explained.
