Fun with Image Maps and SVGs
Over the past few weeks I've been playing around with making some images on my website interactive.
My "informatics" class in high school taught us some basic HTML. By basic I mean in notepad and writing everything by hand, saving to a floppy disk and turning in the homework. I don't remember much of the assignments but I remember learning about image maps and spent a lot of time figuring out the coordinates to get my images to work the right way.
I had the idea of adding an image to my about page of my family that I could then use image maps to make areas clickable and would navigate to different areas. Luckily, figuring out image map coordinates is easier now as I can use Image Map Generator, trace the polygons and the exact output I would use on my site.
With the image map ready to go, my next idea was to take that image and add some sort of interactivity so that hovering over a region would highlight it. Here's where I learned that the <area> element doesn't actually sit on top of the image so adding some background-color with opacity was not going to work. On Firefox, focusing on the <area> does apply some style that matches its polygon which I thought was nice. The solution to me then was to create multiple images that would each highlight the section I wanted, stack them on top of each other, and hide them or show them as needed. *Opens GIMP*.
1 hour later
I'm really not good at image editing software but after splitting the image into separate layers, I was ready to try to put everything together.
I was done. I thought I was done. I tested this and it worked great but then when testing on mobile I found out that the <area> coordinates don't scale as the image gets smaller. Clearly not something I had to deal with in the early 2000s as monitors came in one size fits all. I found some solutions when dealing with responsiveness and image maps but it required adding javascript which I try not to do unless absolutely necessary.
Here's a version of my using image maps:
This one should behave weird on mobile or screens smaller than ~700px
There's a few other methods to achieve the same result here. You could have multiple <img> instead of a single <div id="overlay"> and on hover switch from visibility: hidden to visibility: visible. You could also use a single image and have alternate src that it will switch to as you're hovering over them.
I looked around for what an alternate solution to responsive image maps and everything pointed to SVGs. Similar to image maps I found a tool that would easily let me select areas in an image and create the appropriate area in an SVG but sadly, it only worked for rectangles. I needed polygons. *Opens Inkscape*.
Some more time later
Tracing the approximate areas and exporting the SVG from Inkscape got me most of the way there. The nice thing about this approach is that since the path is actually positioned over the image in the correct spot, we can just change the fill color to highlight that section of the image. Putting everything together, we end up with the following:
Final result with path highlight
If we wanted the highlighted section to be something more complex than a highlighted area with a single color, we can take the same idea from the map example above and overlay an image on hover.
Final result with image overlay
In this case the overlayed image looks pretty close to the simple highlight example so to see an example where the images look like a different color than the original image, check out my mugs.
I wanted to write all this out because even though I feel like I've seen this before, I had a hard time searching for it and finding examples or tutorials. This may not be the best approach to get this effect but its what I came up with. If you've seen something like this implemented anywhere, let me know as I'd love to see it and try to collect them here so that myself and whoever else stumbles upon this can use it as reference and inspiration in the future.