Part of the SVG Imagemaps Reading List

Quite some time ago a reader asked for my help in creating a special UI effect for a German skateboard club: mouseover (or touch) any skater in the photo above to see the effect.

The creative process was unique enough to deserve a two-part series: this article analyses the workflow and code for the effect, while a follow-up will detail the information popups for each skater.

Making The Hit Areas

The core of the effect required two copies of the image: one in , and the other as a background. The “hotspot” areas for each skater would serve two functions: a general hit area for the skater, and a mask that would be applied to that portion of the image.

Skater paths in PhotoShop, before export

Creating the paths by hand in Adobe Illustrator wouldn’t work well: the image was a little too complex for Trace to work. Instead, I used PhotoShop’s Magnetic Lasso tool. The selection made for each skater was saved as a path, and the paths exported to Illustrator, adjusted to fit on top of the background image, and then exported to SVG. (If using the latest version of Adobe PhotoShop CC, you could also export the PSD directly to SVG.)

Placing The SVG

After cleanup, the exported SVG paths are given appropriate id values, placed inside links, and the SVG itself placed inside a <div>: 

<div id="skateclub">    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2074 1382">
        <image width="2074" height="1382" xlink:href="team-photo.jpg">
        </image>
        <a id="konni" xlink:href="#">
            <title>Konni</title>
                <path id="konni-mask-path" d="M427.7,450.3c26.5-0.7…"/>
        </a>
…
    </svg>
</div>

The <title> element inside each link creates the pop-up text over each link.

Enhancing With CSS

The initial CSS places the image correctly in the background of the <div> element; font-size: 0 is used to ensure that the SVG image and the background image remain perfectly matched. Note that the exact same image is used in both the SVG and the background; rather than making a greyscale copy, we’ll change the appearance of the background-image using blend modes. 

#skateclub {
  background-image: url(team-photo.jpg);
  background-position: center center;
  background-size: cover;
  font-size: 0;
  background-blend-mode: luminosity;
  transition: 1s;  
}
#skateclub path { opacity: 0; }

Because there’s no background-color applied to the #skateclub element, the background-blend-mode has no effect at this point. The SVG paths are automatically filled with black; to make them disappear, I’ve set their opacity to 0.

Returning to the SVG, a series of clipPath elements reference the earlier paths: 

<clipPath id="konni-clip">
    <use xlink:href="#konni-mask-path" />
</clipPath>
…

These clipPaths are not applied automatically; we’re going to do that via CSS and JavaScript.

Adding Interactivity

Before turning to the rollover effects, one more style declaration is added to the CSS: 

.hovered {
     background-color: #000;
}

This will be activated via JavaScript added to the bottom of the page: 

var clubcontainer = document.getElementById("skateclub"),
skateclub = clubcontainer.querySelector("svg"),
shapeLinks = skateclub.querySelectorAll("a");

for (var i=0; i < shapeLinks.length; i++) {
    shapeLinks[i].addEventListener("mouseenter", trackEnter, false);
    shapeLinks[i].addEventListener("mouseleave", trackLeave, false);
}

After gathering all the SVG links, two functions (trackEnter and trackLeave) are added to each: 

function trackEnter(evt) {
    skater = evt.target.id;
    skateclub.style.cssText = "clip-path:url(#"+skater+"-clip)";
    clubcontainer.classList.add("hovered");
}
function trackLeave() { 
    skateclub.style.cssText = "";
    clubcontainer.classList.remove("hovered");
}

When the mouse (or touch) enters the area, the current id of the link is gained and concatenated with the word “clip” to get the appropriate clipPath, which is then applied to the SVG, making everything disappear in the SVG disappear except for the current skater. At the same time, the .hovered class is added to the <div>, adding a background-color. In combination with the background-blend-mode, this turns the background image black-and-white, completing the effect. To see the complete code, check out the CodePen repo.

However, this UI is not yet complete: each of the skaters deserves their own profile information popup, which I’ll detail in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/NGMjJd