Image maps provide a way to define multiple clickable areas in a single image. They are a great tool to use when you need to convey information visually rather than through text and have that information be interactive. For example, take a look at the image below:
Let’s say we wanted to have a web page include this image of a map of the United States, and hyperlink each state to a different page. This would be normally very difficult to achieve, but a perfect use for image maps. Flare makes it extremely easy to create image maps using its built-in Image Map Editor.
Image maps, however, are not natively responsive. That means that if the image needs to be scaled down due to the browser window being resized or the page being viewed on a mobile device, the image map will not scale down with it. Fortunately, there is a jQuery plugin that can be easily implemented to resolve this issue.
Creating the Image Map
First, we’ll add an image to a topic. Place your cursor where you want to insert the image. Click Insert > Image to insert the desired image into the topic. Right-click the image and select Image Map to open the Image Map Editor.
Next, we’ll need to mark each of the areas of the image map to be hyperlinked. If the image is rather simple, we may be able to get away with using the Rectangle or Circle mode to roughly draw the area that we’d like to be linked:
For more complex shapes, the Polygon mode can be used. Select the polygon tool and click to plot a point. After the last point of the desired area has been plotted, right-click to create the shape. You can adjust the points by dragging any of the orange dots, add points by clicking a yellow dot or delete a point by clicking a dot and selecting the Delete Point button in the toolbar.
After creating a shape, select it and enter a link in the Link Properties at the bottom to create a hyperlink out of that shape.
Making Images Responsive
Of course, it doesn’t make much sense to have responsive image maps if our images themselves are not responsive. If they are not already, here’s how you can do so:
- Open your stylesheet in the Stylesheet EditorTip: In the Advanced Stylesheet Editor, use the filter to get to your image elements:
- Select the img element
- Expand the Unclassified property and set the max-width to 100%
Implementing the jQuery Plugin
Now that we’ve got our image map, it’s time to make it responsive. The Responsive Image Maps jQuery Plugin can be downloaded from the following GitHub repository by selecting Clone or download > Download ZIP.
Once the zip archive has finished downloading, extract its
contents to a folder. Then, open your Flare project and create a new folder for the script files:
- Open the Content Explorer
- Right-click the Resources folder and select New > Folder
- Name the new folder Scripts
- Open the jQuery-rwdImageMaps-master folder you extracted from the zip archive and copy the jquery.rwdImageMaps.min.js file
- Right-click on the Scripts folder and choose Open Folder in Windows
- Paste the jquery.rwdImageMaps.min.js file into the Scripts folder of the Flare project in Windows Explorer.
Tip: You can keep this new Scripts folder in the root Content folder, or drag into the Resources folder and keep it there.
After this is done, a reference to this script file will need to be added in each topic. The easiest way to do this is through the master page. The following steps should be done for any master page that is applied to a topic which contains an image map:
- Go to Resources > MasterPages. Open the master page and switch to the Text Editor
- Inside the <head> tag, add a <script> tag with the relative path to the jquery.rwdImageMaps.min.js file as the value of the src attribute, for example:
- Just before the closing </body> tag, add the following:
And you’re done! Rebuild your HTML5 output, and you’ll notice that your image maps are now fully responsive. If you have used responsive image maps in creative ways to expand the functionality of your MadCap Flare output, let us know in the comments below!