The era of imagemaps was one where they were raster images at a fixed size, and when CSS wasn’t particularly good for interesting positioning and layout. Once you acknowledge viewports are extremely variable in size, there’s very little place left for imagemaps, and so people stopped making the kinds of designs that could benefit from it; and once you had alpha channels and better CSS and cross-platform vector graphics, there was even less place for traditional client-side imagemaps.
(As for server-side imagemaps, ismap, no one ever really used them. A few years ago I deliberately used them in order to just barely support JavaScript-free operation on a toy just for the sake of it, but they’re very much a solution looking for a problem these days.)
I haven’t used an actual client-side imagemap for years; what I have done is used SVG as a form of better imagemap, not least because you can actually target the areas with styles. The imagemap in the article is approximately equal to this:
But just think, now you can add rules like `a:hover { stroke: blue; stroke-width: 2px; } a:focus { fill: lime }` (maybe with some filter or mix-blend-mode).
The era of imagemaps was one where they were raster images at a fixed size, and when CSS wasn’t particularly good for interesting positioning and layout. Once you acknowledge viewports are extremely variable in size, there’s very little place left for imagemaps, and so people stopped making the kinds of designs that could benefit from it; and once you had alpha channels and better CSS and cross-platform vector graphics, there was even less place for traditional client-side imagemaps.
(As for server-side imagemaps, ismap, no one ever really used them. A few years ago I deliberately used them in order to just barely support JavaScript-free operation on a toy just for the sake of it, but they’re very much a solution looking for a problem these days.)
I haven’t used an actual client-side imagemap for years; what I have done is used SVG as a form of better imagemap, not least because you can actually target the areas with styles. The imagemap in the article is approximately equal to this:
But just think, now you can add rules like `a:hover { stroke: blue; stroke-width: 2px; } a:focus { fill: lime }` (maybe with some filter or mix-blend-mode).