#Kai:...

[jcmarchi]

Revisiting Image Maps

New Post has been published on https://thedigitalinsider.com/revisiting-image-maps/

Revisiting Image Maps

I mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work.

Mike loves ’90s animation, particularly Disney’s Duck Tales and other animated series. He challenged me to find a way to incorporate their retro ’90s style into his design without making it a pastiche. But that wasn’t my only challenge. I also needed to achieve that ’90s feel by using up-to-the-minute code to maintain accessibility, performance, responsiveness, and semantics.

Designing for Mike was like a trip back to when mainstream website design seemed more spontaneous and less governed by conventions and best practices. Some people describe these designs as “whimsical”:

adjective

spontaneously fanciful or playful

given to whims; capricious

quaint, unusual, or fantastic

— Collins English Dictionary

But I’m not so sure that’s entirely accurate. “Playful?” Definitely. “Fanciful?” Possibly. But “fantastic?” That depends. “Whimsy” sounds superfluous, so I call it “expressive” instead.

Studying design from way back, I remembered how websites often included graphics that combined branding, content, and navigation. Pretty much every reference to web design in the ’90s — when I designed my first website — talks about Warner Brothers’ Space Jam from 1996.

Warner Brothers’ Space Jam (1996)

So, I’m not going to do that.

Brands like Nintendo used their home pages to direct people to their content while making branded visual statements. Cheestrings combined graphics with navigation, making me wonder why we don’t see designs like this today. Goosebumps typified this approach, combining cartoon illustrations with brightly colored shapes into a functional and visually rich banner, proving that being useful doesn’t mean being boring.

Left to right: Nintendo, Cheestrings, Goosebumps.

In the ’90s, when I developed graphics for websites like these, I either sliced them up and put their parts in tables or used mostly forgotten image maps.

A brief overview of properties and values

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements. They were popular for graphics, maps, and navigation, but their use declined with the rise of CSS, SVG, and JavaScript.

<map> adds clickable areas to a bitmap or vector image.

<map name="projects"> ... </map>

That <map> is linked to an image using the usemap attribute:

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

Those elements can have separate href and alt attributes and can be enhanced with ARIA to improve accessibility:

<map name="projects"> <area href="" alt="" … /> ... </map>

The shape attribute specifies an area’s shape. It can be a primitive circle or rect or a polygon defined by a set of absolute x and y coordinates:

<area shape="circle" coords="..." ... /> <area shape="rect" coords="..." ... /> <area shape="poly" coords="..." ... />

Despite their age, image maps still offer plenty of benefits. They’re lightweight and need (almost) no JavaScript. More on that in just a minute. They’re accessible and semantic when used with alt, ARIA, and title attributes. Despite being from a different era, even modern mobile browsers support image maps.

Design by Andy Clarke, Stuff & Nonsense. Mike Worth’s website will launch in April 2025, but you can see examples from this article on CodePen.

My design for Mike Worth includes several graphic navigation elements, which made me wonder if image maps might still be an appropriate solution.

Image maps in action

Mike wants his website to showcase his past work and the projects he’d like to do. To make this aspect of his design discoverable and fun, I created a map for people to explore by pressing on areas of the map to open modals. This map contains numbered circles, and pressing one pops up its modal.

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

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

This approach is problematic. Those anchors are only active when SVG is inline and don’t work with an <img> element. But image maps work perfectly, even though specifying their coordinates can be laborious. Fortunately, plenty of tools are available, which make defining coordinates less tedious. Upload an image, choose shape types, draw the shapes, and copy the markup:

<img src="projects.svg" usemap="#projects-map.svg"> <map name="projects-map.svg"> <area href="" alt="" coords="..." shape="circle"> <area href="" alt="" coords="..." shape="circle"> ... </map>

Image maps work well when images are fixed sizes, but flexible images present a problem because map coordinates are absolute, not relative to an image’s dimensions. Making image maps responsive needs a little JavaScript to recalculate those coordinates when the image changes size:

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

I still wasn’t happy with this implementation as I wanted someone to be able to press on much larger map areas, not just the numbered circles.

Every <path> has coordinates which define how it’s drawn, and they’re relative to the SVG viewBox:

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

On the other hand, a map’s <area> coordinates are absolute to the top-left of an image, so <path> values need to be converted. Fortunately, Raphael Monnerat has written PathToPoints, a tool which does precisely that. Upload an SVG, choose the point frequency, copy the coordinates for each path, and add them to a map area’s coords:

<map> <area href="" shape="poly" coords="..."> <area href="" shape="poly" coords="..."> <area href="" shape="poly" coords="..."> ... </map>

More issues with image maps

Image maps are hard-coded and time-consuming to create without tools. Even with tools for generating image maps, converting paths to points, and then recalculating them using JavaScript, they could be challenging to maintain at scale.

<area> elements aren’t visible, and except for a change in the cursor, they provide no visual feedback when someone hovers over or presses a link. Plus, there’s no easy way to add animations or interaction effects.

But the deal-breaker for me was that an image map’s pixel-based values are unresponsive by default. So, what might be an alternative solution for implementing my map using CSS, HTML, and SVG?

Anchors positioned absolutely over my map wouldn’t solve the pixel-based positioning problem or give me the irregular-shaped clickable areas I wanted. Anchors within an external SVG wouldn’t work either.

But the solution was staring me in the face. I realized I needed to:

Create a new SVG path for each clickable area.

Make those paths invisible.

Wrap each path inside an anchor.

Place the anchors below other elements at the end of my SVG source.

Replace that external file with inline SVG.

I created a set of six much larger paths which define the clickable areas, each with its own fill to match its numbered circle. I placed each anchor at the end of my SVG source:

<svg … viewBox="0 0 1024 1024"> <!-- Visible content --> <g>...</g> <!-- Clickable areas -->` <g id="links">` <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 reduced those anchors’ opacity to 0 and added a short transition to their full-opacity hover state:

#links a opacity: 0; transition: all .25s ease-in-out; #links a:hover opacity: 1;

While using an image map’s <area> sadly provides no visual feedback, embedded anchors and their content can respond to someone’s action, hint at what’s to come, and add detail and depth to a design.

I might add gloss to those numbered circles to be consistent with the branding I’ve designed for Mike. Or, I could include images, titles, or other content to preview the pop-up modals:

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

Try it for yourself:

Expressive design, modern techniques

Designing Mike Worth’s website gave me a chance to blend expressive design with modern development techniques, and revisiting image maps reminded me just how important a tool image maps were during the period Mike loves so much.

Ultimately, image maps weren’t the right tool for Mike’s website. But exploring them helped me understand what I really needed: a way to recapture the expressiveness and personality of ’90s website design using modern techniques that are accessible, lightweight, responsive, and semantic. That’s what design’s about: choosing the right tool for a job, even if that sometimes means looking back to move forward.

Biography: Andy Clarke

Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.

Andy’s written several industry-leading books, including Transcending CSS, Hardboiled Web Design, and Art Direction for the Web. He’s also worked with businesses of all sizes and industries to achieve their goals through design.

Visit Andy’s studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers.

[listen-to-the-inner-walrus]

Love it when Rolling Stone puts out an article about the 25 most influential internet creators and I've only heard of 7 of them

[demaparbat-hp]

He's never happy

[bloodyboi]

[kaitoru]

𓍼 he always grumbles about how tight you are every time as if his massive dick isnt the real issue.

people often say you are lucky to have your husband, because of his impressive size.

his cock.

its as big as they say, thick and heavy stretching you to your limit as he pushes in, inch by agonizing inch.

you’re soaked, dripping but the tightness makes you both groan, your pussy clenching around him like a vice.

“goddamn, you’re too tight,” he mutters, his hands gripping your thighs to hold you open.

“every fucking time, its like you’re trying to kill me.” you gasp, half laughing, half moaning your hands braced against his chest as he bottoms out, the stretch burning so good you can barely think.

“maybe you’re just too big, kento,” you tease voice breathy but sharp, knowing itll rile him up.

his eyes narrow and he thrusts hard, deep, making you cry out, your nails digging into his skin.

“too big?” he repeats, a smirk tugging at his lips as he pulls back, then slams into you again, the headboard rattling.

“you’re the one squeezing me like you want me to lose it.” his words are clipped, frustrated.

your pussy flutters, and he groans, his rhythm faltering for a second.

“fuck, do that again, and im not gonna last.”

“kento, cmon,” you whine your hips rocking to meet his thrusts, the slick sounds obscene in the quiet room.

“you’re always complaining, but you love it—admit it.” you clench around him, and his breath hitches, his hands sliding to your waist, gripping hard as he fucks you faster, deeper, like hes trying to prove a point.

“love it?” he growls leaning down, his lips brushing your ear, his tie dangling against your chest.

“this tight pussy is gonna be the death of me.” eitherwise the way hes pounding into you, relentless, says hes addicted.

you moan loud and unashamed, and he keeps talking, unable to stop.

“you feel too good, too—fuck—perfect, how am i supposed to focus on anything when you’re like this?”

“kento, please..” you gasp, your voice breaking hands clawing at his shoulders as you feel the stretch, the fullness, the everything.

“dont stop—fuck, you’re so big.” your praise slips out and he groans, deep and guttural, his hips stuttering as he fights to keep control.

“say that again,” he demands voice husky, one hand sliding to your clit, rubbing firm, quick circles that make you see stars.

“tell me how big i am, love, you started this.”

“so big, kentooo...” you moan, voice high and desperate,

“can barely take you—fuck, you’re wrecking me.” the words spill out, and hes done for, his groans turning to curses as he thrusts once, twice, then comes, spilling hot and deep inside you, his body shuddering as he grips your hips like you’re his anchor.

you’re right behind him, your orgasm crashing through you, a sharp, shuddering wave that leaves you gasping, clenching around him as he rides it out, still murmuring, “too tight, too fucking tight.”

[thatonedudeinthecorner]

Grunkle Stan is WHAT

I don’t know where the original meme is even from but it GETS ME EVERY TIME

[torillatavataan]

US authorities have turned to Europe for help with the country's severe egg shortage. The shortfall is due to bird flu, which has plagued the United States for several years.

The Finnish Poultry Association says it has been contacted about exporting eggs to the US. The organisation's executive director, Veera Lehtilä, told Yle on Saturday that exporting eggs does not seem to be possible at the moment because no market access negotiations have been held with US authorities. This can be a drawn-out process involving extensive inspections and studies.

According to the Danish magazine AgriWatch, the US has also requested eggs from Denmark, Sweden and the Netherlands.

One of Sweden’s biggest egg producers, Kronägg, told the daily Aftonbladet that it is unlikely to export eggs to the US, saying it would be difficult due to various export restrictions. Meanwhile, there is also an egg shortage in Europe.

(full article)

[damnfool-of-a-took]

What it says on the tin, plus some simple explanations of who has the power to do what.

[wyrmswears]

[kyri45]

Family Portrait

oh boy I sure hope nothing traumatic will ever happen to poor little Kai

many of you already know, but the council (me and you guys) have decided that the canon fankid of Spicynoodle is Kai. Yes, Kai from Ninjago.

Kai was born decades after the current events of the SBP Second Star timeline. He mostly inherited the Demon Bull family traits, especially his human appearance from both Red Son and Princess Iron Fan. He has small fangs, a pair of horns that wont grow until he is of age, and a thin tail with a bigger tuff on the end of the same fur and color of his Baba Xiaotian.

As for powers, Kai developed pyrokinesis for a different kind of fire than his Father Red Son (of which none of the parents have yet figured out the kind, thus making training much harder), as well as the agility of his father, and the love for swordsmanship from his aunt Mei (although they agreed he's too young to use anything close to a real blade yet). Being born throught the "mortal way" he is thus not immortal like his parents, as Xiaotian wished they could give him the choice to become one once he reaches adulthood.

I wont go too much in deep here, but while the timeline pre-Ninjago pilot is slightly different for obvious reasons, most of the canon events of Ninjago Season 1-8 still happen.

Let's just say the events post-pillar of Season 5 had to do with how Kai ended up in the Ninjago realm after a certain age...

[eszkayanelie]

kay faraday loves imitating her gay dad during her graduation (for a degree he paid for)

[noodles-and-tea]

I LOVE WHEN THEY

[blondie-drawings]

mama a Body behind you 😰 // pt1/pt2/pt3

[demaparbat-hp]

I had a vision in shades of sacrifice.

[redvelvetwishtree]