5 ms·

> 4. map & area These take me back, but I'm trying to remember why I stopped using them. Did they go out of fashion? Or was it accessibility related?

jiggywiggy 4y ago
Responsive reasons. Hardly ever can you do full absolute positioning.
- parminya 4y ago
  I think they died well before responsive became a concern. Their heyday was really the time before not just CSS but even tables, at which time they were the only way to have links positioned in space rather than in flowing text. I don't think anyone liked imagemaps - it's just that there was no alternative. But their limitations were massive. Chiefly, in a period when dialup internet was becoming more common, an image map meant that before a user could interact with your website, they had to wait for a very slow download of a very large image that contained mostly text. You couldn't interact with them any more - no ability to select the text in them, or perhaps the reader had a different color/font preference? Tough luck. When tables came out, they began to face competition, but they weren't defeated. Aside from table-first designs that mixed images and text, you could mostly do without imagemaps by cutting the image up, eliminating table borders/cellpadding/cellspacing and making careful use of colspan and rowspan, with a part of the image in each cell. This had most of the same user-side problems as imagemaps, but was easier for many people to maintain (I'm not sure quite why: I assume some people have trouble with thinking in terms of x/y coordinates and regions). CSS thoroughly destroyed them. Everything an image map could do, tables+CSS and eventually CSS could do better. This was still ages before responsive became a concern, at a time when webpage maintainers would assume you used an 800x600 or 1024x768 screen with a maximized window and just ignore everyone who didn't match that. Nowadays, any time an image map might look like the solution, the actual solution is SVG, which gives you everything an image map had but is moreover correct.
  - perilunar 4y ago
    > before a user could interact with your website, they had to wait for a very slow download of a very large image that contained mostly text Back then we also had the lowsrc attribute for images, so that large image should have been preceded by a much smaller 1-bit version.
superkuh 4y ago
I think they went out of style because they weren't javascript. But many older websites still use them to create fast loading, universally supported, interactive data visualizations that JS would still struggle to match. One of my favorites is the dynamic space weather visualization from Lockheed Martin Solar and Astrophysics Laboratory, https://www.lmsal.com/solarsoft/latest_events/ https://www.lmsal.com/solarsoft/latest_events/
- RedShift1 4y ago
  What's interactive about that example?
  - the_third_wave 4y ago
    It'll load detailed pages based on the location of the image you click. It might not be interactive in the modern CSS-animated way but it does provide interaction with what would otherwise be a static image.
  - superkuh 4y ago
    I said dynamic, not interactive. The image and the image map are updated every few minutes. Within the image map there are links to external space weather resources you can click. These are updated in real time as they become available. The image is dynamic with time as are the links to the resources within and they're all displayed in a single unified time plot that loads instantly and displays on everything back to the 90s.
Brajeshwar 4y ago
I think because it was hard to write it manually unless you use something like Ultradev/Dreamweaver.
- otherme123 4y ago
  I remember wasting a lot of time making one fancy map, only to have people complaining about "where is the link to...?"
irrational 4y ago
Same. I remember using this feature extensively way back when. But I can’t remember when I stopped using it and what replaced it. Hmm, now that I think about it, this was in the days before we started using Flash. But after the Flash era we didn’t go back to using map.
Agentlien 4y ago
I was thinking of this just a few weeks ago! When I made my first webpage in school (about 20 years ago) I used a sitemap made out of an image with map. I was thinking back to it and wondering whatever happened to that element.
vehemenz 4y ago
You can still use them, but you need JavaScript calculations to make sure the map still works when the image shrinks. Not a big deal to be honest.
chrismorgan 4y ago
They’re not actually that useful in practice. 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: <svg viewBox="0 0 400 379" width="400" height="379" fill="none"> <image href="workplace.jpg" width="400" height="379"><desc>Workplace</desc></image> <a href="computer.html"> <title>Computer</title> <rect x="34" y="34" width="270" height="350"/> </a> <a href="phone.html"> <title>Phone</title> <rect x="290" y="172" width="333" height="250"/> </a> <a href="coffee.html"> <title>Cup of coffee</title> <circle cx="337" cy="300" r="44"/> </a> </svg> 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).
Minor49er 4y ago
They are still in use on Bandcamp for navigation in custom headers

jiggywiggy 4y ago

Responsive reasons. Hardly ever can you do full absolute positioning.

parminya 4y ago
I think they died well before responsive became a concern. Their heyday was really the time before not just CSS but even tables, at which time they were the only way to have links positioned in space rather than in flowing text. I don't think anyone liked imagemaps - it's just that there was no alternative. But their limitations were massive. Chiefly, in a period when dialup internet was becoming more common, an image map meant that before a user could interact with your website, they had to wait for a very slow download of a very large image that contained mostly text. You couldn't interact with them any more - no ability to select the text in them, or perhaps the reader had a different color/font preference? Tough luck. When tables came out, they began to face competition, but they weren't defeated. Aside from table-first designs that mixed images and text, you could mostly do without imagemaps by cutting the image up, eliminating table borders/cellpadding/cellspacing and making careful use of colspan and rowspan, with a part of the image in each cell. This had most of the same user-side problems as imagemaps, but was easier for many people to maintain (I'm not sure quite why: I assume some people have trouble with thinking in terms of x/y coordinates and regions). CSS thoroughly destroyed them. Everything an image map could do, tables+CSS and eventually CSS could do better. This was still ages before responsive became a concern, at a time when webpage maintainers would assume you used an 800x600 or 1024x768 screen with a maximized window and just ignore everyone who didn't match that. Nowadays, any time an image map might look like the solution, the actual solution is SVG, which gives you everything an image map had but is moreover correct.
- perilunar 4y ago
  > before a user could interact with your website, they had to wait for a very slow download of a very large image that contained mostly text Back then we also had the lowsrc attribute for images, so that large image should have been preceded by a much smaller 1-bit version.

superkuh 4y ago

I think they went out of style because they weren't javascript. But many older websites still use them to create fast loading, universally supported, interactive data visualizations that JS would still struggle to match. One of my favorites is the dynamic space weather visualization from Lockheed Martin Solar and Astrophysics Laboratory, https://www.lmsal.com/solarsoft/latest_events/ https://www.lmsal.com/solarsoft/latest_events/

RedShift1 4y ago
What's interactive about that example?
- the_third_wave 4y ago
  It'll load detailed pages based on the location of the image you click. It might not be interactive in the modern CSS-animated way but it does provide interaction with what would otherwise be a static image.
- superkuh 4y ago
  I said dynamic, not interactive. The image and the image map are updated every few minutes. Within the image map there are links to external space weather resources you can click. These are updated in real time as they become available. The image is dynamic with time as are the links to the resources within and they're all displayed in a single unified time plot that loads instantly and displays on everything back to the 90s.

Brajeshwar 4y ago

I think because it was hard to write it manually unless you use something like Ultradev/Dreamweaver.

otherme123 4y ago
I remember wasting a lot of time making one fancy map, only to have people complaining about "where is the link to...?"

irrational 4y ago

Same. I remember using this feature extensively way back when. But I can’t remember when I stopped using it and what replaced it. Hmm, now that I think about it, this was in the days before we started using Flash. But after the Flash era we didn’t go back to using map.

Agentlien 4y ago

I was thinking of this just a few weeks ago! When I made my first webpage in school (about 20 years ago) I used a sitemap made out of an image with map. I was thinking back to it and wondering whatever happened to that element.

vehemenz 4y ago

You can still use them, but you need JavaScript calculations to make sure the map still works when the image shrinks. Not a big deal to be honest.

chrismorgan 4y ago

They’re not actually that useful in practice. 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: <svg viewBox="0 0 400 379" width="400" height="379" fill="none"> <image href="workplace.jpg" width="400" height="379"><desc>Workplace</desc></image> <a href="computer.html"> <title>Computer</title> <rect x="34" y="34" width="270" height="350"/> </a> <a href="phone.html"> <title>Phone</title> <rect x="290" y="172" width="333" height="250"/> </a> <a href="coffee.html"> <title>Cup of coffee</title> <circle cx="337" cy="300" r="44"/> </a> </svg> 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).

Minor49er 4y ago

They are still in use on Bandcamp for navigation in custom headers