I had a problem. I wanted to embed multiple hyperlinks into a single image. My solution turned out to be image mapping.
I’m writing this post to help cement my understanding & share the discovery I had in case any one else finds a use for image mapping. The first thought I had was those of you who dabble in sketch noting…
The short story is I use our teams applications architecture diagram to help my testing conversations & I wanted to use the diagram to link to the relevant component pages in Confluence which outline what the components are, what they are for and how they are tested. As our applications architecture is more than one component, one hyperlink in one image just wasn’t going to cut it. Image mapping to the rescue!
An image map consists of 2 main parts: clickable shape coordinates & the embedded hyperlink for that shape relative to an image. I.e. whats the size of the shape relative to the image & where should the user go when that shape is clicked.
To obtain the coordinates for the shape, you can get free online tools such as image-mapping.com, or most image editors will give you coordinates (some of the free ones won’t let you edit images over a certain size). Because of the nature of the diagram, I didn’t want to use the online mapper.
Instead I turned to my old friend GIMP (free!) which not only gives you the coordinates for large images, it also has an image mapping plugin - what a dream! I followed this guide to create the data for the image map in GIMP.
Now you have your shapes’ coordinates, hyperlinks (& JavaScript actions if you fancied it) you have the raw data to build your image map in your web space of choice..
I wanted my image map in Confluence, so I followed this guide on image mapping in Confluence. The beauty of Confluence is I could link to the architecture diagram in its original location; one source of truth and all that jazz. The advantage of this is if the image is edited, we automatically see those edits in our page (you can see an example of this at the end of this post).
The end result is that our architecture diagram is now a main entry point to finding out about our application. We can point new starters to the image map of the diagram to help them familiarise & orientate themselves. The diagram has been decorated with icons representing what testing is performed where. The hyperlinks in these shapes for these icons navigate the user directly to an anchor for testing in the page describing that component.
Here’s an example of an image map I made for this post (image is on my site). I followed this guide for creating image maps in WordPress (actually, copy/paste the HTML code generated in GIMP into WP). Each circle contains a different link:
Here’s that other trick useful for Confluence; mapping an image on another site. The image below is of a sketch by Richard Bradshaw on Twitter (there are 4 mapped links in the image, can you find them?)
Please do let me know if & how you can or do use image mapping - I’m really interested in seeing how its already been applied.
If not, I hope this post helps open your sketch notes & diagrams for future learning!
Duncs