Revisiting Picture Maps | CSS-Tips

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

Mike loves ’90s animation, significantly Disney’s Duck Tales and different animated collection. He challenged me to discover a approach 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 attain that ’90s really feel through the use of up-to-the-minute code to keep up 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 folks 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 positive that’s completely correct. “Playful?” Undoubtedly. “Fanciful?” Presumably. However “improbable?” That relies upon. “Whimsy” sounds superfluous, so I name it “expressive” as a substitute.

Finding out design from means again, I remembered how web sites usually 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 try this.

Manufacturers like Nintendo used their house pages to direct folks 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 at the moment. Goosebumps typified this method, combining cartoon illustrations with brightly coloured shapes right into a purposeful 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 components in tables or used largely forgotten picture maps.

A short overview of properties and values

Let’s run by way of a fast refresher. Picture maps date all the best way 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 parts. They had been standard 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 identify="tasks">
  ...
</map>

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

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

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

<map identify="tasks">
  <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="https://css-tricks.com/revisiting-image-maps/..." ... />
<space form="rect" coords="https://css-tricks.com/revisiting-image-maps/..." ... />
<space form="poly" coords="https://css-tricks.com/revisiting-image-maps/..." ... />

Regardless of their age, picture maps nonetheless provide 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 trendy cell browsers assist picture maps.

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

Picture maps in motion

Mike desires his web site to showcase his previous work and the tasks he’d love to do. To make this facet of his design discoverable and enjoyable, I created a map for folks 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="https://css-tricks.com/revisiting-image-maps/tasks.svg" alt="Initiatives">

<svg ...>
  ...
  <a href="https://css-tricks.com/revisiting-image-maps/...">
    <circle cx="35" cy="35" r="35" fill="#941B2F"/>
    <path fill="#FFF" d="https://css-tricks.com/revisiting-image-maps/..."/>
  </a>
</svg>

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

<img src="https://css-tricks.com/revisiting-image-maps/tasks.svg" usemap="#projects-map.svg">

<map identify="projects-map.svg">
  <space href="" alt="" coords="https://css-tricks.com/revisiting-image-maps/..." form="circle">
  <space href="" alt="" coords="https://css-tricks.com/revisiting-image-maps/..." form="circle">
  ...
</map>

Picture maps work properly 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 somewhat JavaScript to recalculate these coordinates when the picture modifications dimension:

perform resizeMap() {
  const picture = doc.getElementById("tasks");
  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 part of(",");
    space.setAttribute("coords", scaledCoords);
  });
}

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

I nonetheless wasn’t pleased with this implementation as I wished 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, they usually’re relative to the SVG viewBox:

<svg width="1024" peak="1024">
  <path fill="#BFBFBF" d="https://css-tricks.com/revisiting-image-maps/…"/>
</svg>

However, a map’s <space> coordinates are absolute to the top-left of a picture, so <path> values must be transformed. Fortuitously, Raphael Monnerat has written PathToPoints, a device 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="https://css-tricks.com/revisiting-image-maps/...">
  <space href="" form="poly" coords="https://css-tricks.com/revisiting-image-maps/...">
  <space href="" form="poly" coords="https://css-tricks.com/revisiting-image-maps/...">
  ...
</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 may very well be difficult to keep up at scale.

<space> parts 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 means 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 is likely to be another answer for implementing my map utilizing CSS, HTML, and SVG?

Anchors positioned completely over my map wouldn’t resolve the pixel-based positioning downside or give me the irregular-shaped clickable areas I wished. 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 beneath different parts on the finish of my SVG supply.
5. Substitute 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="https://css-tricks.com/revisiting-image-maps/..."><path fill="#B48F4C" d="https://css-tricks.com/revisiting-image-maps/..."/></a>`
    <a href="https://css-tricks.com/revisiting-image-maps/..."><path fill="#6FA676" d="https://css-tricks.com/revisiting-image-maps/..."/></a>`
    <a href="https://css-tricks.com/revisiting-image-maps/..."><path fill="#30201D" d="https://css-tricks.com/revisiting-image-maps/..."/></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’d add gloss to these numbered circles to be according to the branding I’ve designed for Mike. Or, I may embrace photographs, titles, or different content material to preview the pop-up modals:

<g id="hyperlinks">
  <a href="https://css-tricks.com/revisiting-image-maps/…">
    <path fill="#B48F4C" d="https://css-tricks.com/revisiting-image-maps/..."/>
    <picture href="https://css-tricks.com/revisiting-image-maps/..." ... />
  </a>
</g>

Strive it for your self:

Expressive design, trendy strategies

Designing Mike Value’s web site gave me an opportunity to mix expressive design with trendy growth strategies, and revisiting picture maps jogged my memory simply how vital a device picture maps had been in the course of the interval Mike loves a lot.

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

Biography: Andy Clarke

Sometimes called 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 Internet Design, and Artwork Course for the Internet. He’s additionally labored with companies of all sizes and industries to attain 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 hundreds of net designers and builders.