Revisiting Picture Maps

I discussed final time that I’ve been engaged on a brand new web site for Emmy-award-winning sport composer Mike Price. He employed me to create a extremely graphical design that showcases his work.

Mike loves ’90s animation, notably Disney’s Duck Tales and different animated collection. He challenged me to discover a solution to incorporate their retro ’90s fashion into his design with out making it a pastiche. However that wasn’t my solely problem. I additionally wanted to realize that ’90s really feel by utilizing up-to-the-minute code to take care of accessibility, efficiency, responsiveness, and semantics.

Designing for Mike was like a visit again to when mainstream web site design appeared extra spontaneous and fewer ruled by conventions and greatest practices. Some individuals describe these designs as “whimsical”:

adjective

1. spontaneously fanciful or playful
2. given to whims; capricious
3. quaint, uncommon, or improbable

— Collins English Dictionary

However I’m not so certain that’s fully correct. “Playful?” Positively. “Fanciful?” Probably. However “improbable?” That relies upon. “Whimsy” sounds superfluous, so I name it “expressive” as an alternative.

Learning design from approach again, I remembered how web sites typically included graphics that mixed branding, content material, and navigation. Just about each reference to net design within the ’90s — after I designed my first web site — talks about Warner Brothers’ Area Jam from 1996.

So, I’m not going to do this.

Manufacturers like Nintendo used their house pages to direct individuals to their content material whereas making branded visible statements. Cheestrings mixed graphics with navigation, making me marvel why we don’t see designs like this as we speak. Goosebumps typified this method, combining cartoon illustrations with brightly coloured shapes right into a practical and visually wealthy banner, proving that being helpful doesn’t imply being boring.

Within the ’90s, after I developed graphics for web sites like these, I both sliced them up and put their elements in tables or used principally forgotten picture maps.

A quick overview of properties and values

Let’s run by way of a fast refresher. Picture maps date all the way in which again to HTML 3.2, the place, first, server-side maps after which client-side maps outlined clickable areas over a picture utilizing map and space components. They have been in style for graphics, maps, and navigation, however their use declined with the rise of CSS, SVG, and JavaScript.

<map> provides clickable areas to a bitmap or vector picture.

<map title="initiatives">
  ...
</map>

That <map> is linked to a picture utilizing the usemap attribute:

<img usemap="#initiatives" ...>

These components can have separate href and alt attributes and could be enhanced with ARIA to enhance accessibility:

<map title="initiatives">
  <space href="" alt="" … />
  ...
</map>

The form attribute specifies an space’s form. It may be a primitive circle or rect or a polygon outlined by a set of absolute x and y coordinates:

<space form="circle" coords="..." ... />
<space form="rect" coords="..." ... />
<space form="poly" coords="..." ... />

Regardless of their age, picture maps nonetheless supply loads of advantages. They’re light-weight and want (nearly) no JavaScript. Extra on that in only a minute. They’re accessible and semantic when used with alt, ARIA, and title attributes. Regardless of being from a special period, even fashionable cellular browsers help picture maps.

My design for Mike Price consists of a number of graphic navigation components, which made me marvel if picture maps would possibly nonetheless be an acceptable answer.

Picture maps in motion

Mike desires his web site to showcase his previous work and the initiatives he’d love to do. To make this side of his design discoverable and enjoyable, I created a map for individuals to discover by urgent on areas of the map to open modals. This map accommodates numbered circles, and urgent one pops up its modal.

My first thought was to embed anchors into the exterior map SVG:

<img src="initiatives.svg" alt="Initiatives">

<svg ...>
  ...
  <a href="...">
    <circle cx="35" cy="35" r="35" fill="#941B2F"/>
    <path fill="#FFF" d="..."/>
  </a>
</svg>

This method is problematic. These anchors are solely lively when SVG is inline and don’t work with an <img> aspect. However picture maps work completely, regardless that specifying their coordinates could be laborious. Fortuitously, loads of instruments can be found, which make defining coordinates much less tedious. Add a picture, select form sorts, draw the shapes, and duplicate the markup:

<img src="initiatives.svg" usemap="#projects-map.svg">

<map title="projects-map.svg">
  <space href="" alt="" coords="..." form="circle">
  <space href="" alt="" coords="..." form="circle">
  ...
</map>

Picture maps work effectively when photographs are mounted sizes, however versatile photographs current an issue as a result of map coordinates are absolute, not relative to a picture’s dimensions. Making picture maps responsive wants a little bit JavaScript to recalculate these coordinates when the picture adjustments measurement:

perform resizeMap() {
  const picture = doc.getElementById("initiatives");
  const map = doc.querySelector("map[name='projects-map']");
  
  if (!picture || !map || !picture.naturalWidth) return;
  
  const scale = picture.clientWidth / picture.naturalWidth;
  map.querySelectorAll("space").forEach(space => {
  
    if (!space.dataset.originalCoords) {
      space.dataset.originalCoords = space.getAttribute("coords");
    }

    const scaledCoords = space.dataset.originalCoords
    
    .cut up(",")
    .map(coord => Math.spherical(coord * scale))
    .be a part of(",");
    space.setAttribute("coords", scaledCoords);
  });
}

["load", "resize"].forEach(occasion =>
  window.addEventListener(occasion, resizeMap)
);

I nonetheless wasn’t pleased with this implementation as I needed somebody to have the ability to press on a lot bigger map areas, not simply the numbered circles.

Each <path> has coordinates which outline the way it’s drawn, and so they’re relative to the SVG viewBox:

<svg width="1024" top="1024">
  <path fill="#BFBFBF" d="…"/>
</svg>

Then again, a map’s <space> coordinates are absolute to the top-left of a picture, so <path> values should be transformed. Fortuitously, Raphael Monnerat has written PathToPoints, a software which does exactly that. Add an SVG, select the purpose frequency, copy the coordinates for every path, and add them to a map space’s coords:

<map>
  <space href="" form="poly" coords="...">
  <space href="" form="poly" coords="...">
  <space href="" form="poly" coords="...">
  ...
</map>

Extra points with picture maps

Picture maps are hard-coded and time-consuming to create with out instruments. Even with instruments for producing picture maps, changing paths to factors, after which recalculating them utilizing JavaScript, they might be difficult to take care of at scale.

<space> components aren’t seen, and aside from a change within the cursor, they supply no visible suggestions when somebody hovers over or presses a hyperlink. Plus, there’s no simple approach so as to add animations or interplay results.

However the deal-breaker for me was that a picture map’s pixel-based values are unresponsive by default. So, what could be an alternate answer for implementing my map utilizing CSS, HTML, and SVG?

Anchors positioned completely over my map wouldn’t remedy the pixel-based positioning downside or give me the irregular-shaped clickable areas I needed. Anchors inside an exterior SVG wouldn’t work both.

However the answer was staring me within the face. I spotted I wanted to:

1. Create a brand new SVG path for every clickable space.
2. Make these paths invisible.
3. Wrap every path inside an anchor.
4. Place the anchors under different components on the finish of my SVG supply.
5. Change that exterior file with inline SVG.

I created a set of six a lot bigger paths which outline the clickable areas, every with its personal fill to match its numbered circle. I positioned every anchor on the finish of my SVG supply:

<svg … viewBox="0 0 1024 1024">

  <!-- Seen content material -->
  <g>...</g>

  <!-- Clickable areas -->`
  <g id="hyperlinks">`
    <a href="..."><path fill="#B48F4C" d="..."/></a>`
    <a href="..."><path fill="#6FA676" d="..."/></a>`
    <a href="..."><path fill="#30201D" d="..."/></a>`
    ...
  </g>
</svg>

Then, I decreased these anchors’ opacity to 0 and added a brief transition to their full-opacity hover state:

#hyperlinks a {
  opacity: 0;
  transition: all .25s ease-in-out;
}

#hyperlinks a:hover {
  opacity: 1;
}

Whereas utilizing a picture map’s <space> sadly gives no visible suggestions, embedded anchors and their content material can reply to somebody’s motion, trace at what’s to return, and add element and depth to a design.

I would add gloss to these numbered circles to be in step with the branding I’ve designed for Mike. Or, I may embody photographs, titles, or different content material to preview the pop-up modals:

<g id="hyperlinks">
  <a href="…">
    <path fill="#B48F4C" d="..."/>
    <picture href="..." ... />
  </a>
</g>

Strive it for your self:

Expressive design, fashionable methods

Designing Mike Price’s web site gave me an opportunity to mix expressive design with fashionable improvement methods, and revisiting picture maps jogged my memory simply how essential a software picture maps have been through the interval Mike loves a lot.

In the end, picture maps weren’t the suitable software for Mike’s web site. However exploring them helped me perceive what I actually wanted: a solution to recapture the expressiveness and character of ’90s web site design utilizing fashionable methods which can be accessible, light-weight, responsive, and semantic. That’s what design’s about: choosing the proper software for a job, even when that typically means wanting again to maneuver ahead.

---

Biography: Andy Clarke

Also known as one of many pioneers of net design, Andy Clarke has been instrumental in pushing the boundaries of net design and is understood for his artistic and visually beautiful designs. His work has impressed numerous designers to discover the total potential of product and web site design.

Andy’s written a number of industry-leading books, together with Transcending CSS, Hardboiled Net Design, and Artwork Path for the Net. He’s additionally labored with companies of all sizes and industries to realize their objectives by way of design.

Go to Andy’s studio, Stuff & Nonsense, and take a look at his Contract Killer, the favored net design contract template trusted by 1000’s of net designers and builders.

---

Revisiting Picture Maps initially printed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.