9 ms·

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... If it were me, I'd go for the <ma

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... If it were me, I'd go for the <map> tag instead of fancy new CSS!

dizhn 4y ago
I don't know if this is the same way image maps were made in the early 90s but that's what I immediately thought of too.
- ldjb 4y ago
  <map> was introduced in HTML 3.2 in 1997. The other technique I often saw was to cut the image into a grid of separate image files. They would look to the user as if they were a single image, but you could hyperlink some of the images so the effect was that parts of the overall image were hyperlinked and some weren't. Developers came up with all kinds of interesting tricks in those days!
  - yosito 4y ago
    My first websites were built like this. I'd design PSDs and then slice them into images that I'd place in tables. I completely forgot about that approach!
SquareWheel 4y ago
I had the same thought. I remember exporting image-based webpages in Macromedia Fireworks using HTML maps. No reason they shouldn't work today, even if they carry the same problems now as they did then (image-based websites are massive).
- cantSpellSober 4y ago
  What IDEs have a GUI for creating image maps anymore? Last one I remember using was in Macromedia Dreamweaver. > image-based websites are massive With the huge gains we've made in image optimization since <map>s were popular this isn't always true anymore.
  - kevin_thibedeau 4y ago
    That's more due to the huge gains in javascript bloat offsetting the cost of images.
    - cantSpellSober 4y ago
      No it's due to image optimization. 5 bloated apps can easily be smaller than 1 bad gif.
notjustanymike 4y ago
Map is no good for SEO or WCAG though.
- tacostakohashi 4y ago
  Are images of handwritten text good for that?
  - easrng 4y ago
    No, they aren't.
  - cantSpellSober 4y ago
    Maybe there's an opportunity here with on-the-fly OCR. Imagine if a screen reader could really read.
    - eyelidlessness 4y ago
      I have to imagine some can, as the article mentions on the fly OCR of handwriting to generate the transcription, and I can select text from the handwriting on my phone (iOS 15 currently). I was initially surprised to see it’s not transparent text overlaying the image, but apparently the text recognition is actually that good.
    - jahewson 4y ago
      Safari already has this.
      - cantSpellSober 4y ago
        Safari has Live Text; that's just Google Lens with less features
    - yellow_postit 4y ago
      On the fly for each end user loading seems wasteful, why reprocess each time?
innocenat 4y ago
When I clicked the first link in the article, I though it was an image map too.
LukeShu 4y ago
AFAICT, there's not a way to get those nice hover effects with a <map>, at least not without a bunch of JS.
- Groxx 4y ago
  Yeah, my first thought was <map>, then I moused over it and noticed how utterly trivial this would be to re-style in comparison. This is a good approach, I think. It's kinda fine-tuned for reMarkable output, as it's mostly pure black or white pixels, but clearly they're fine with that. And the end result works quite well, and seems as easy or easier to implement. This is all also kinda made moot by there being a link to an excellent transcript at the bottom. Accessibility needs are better covered by a straightforward alternate page than <map> alone.
- saghm 4y ago
  Not sure if I triggered some sort of race with fast mouse movement or my mouse being over the link before it appeared or something, but for me on Firefox on Linux, the blue color went away when I hovered my mouse over a link. I'm not sure if that's really a benefit; it honestly confused me and made me think that I wasn't actually hovering over a link at first, since that's not how traditional links work.
  - LukeShu 4y ago
    (Also on Firefox on Linux) I can't begin fathom how that could happen. It's not some fancy JS thing, it's a very simple CSS effect: a:hover { filter: opacity(0.5) !important; } .post a { background-color: #35c; mix-blend-mode: screen; position: absolute; display: block; } Do you maybe have a user-stylesheet that overrides something about links? But I can't think of anything that makes sense that wouldn't also break the non-hovering version too. Does opacity() combined with mix-blend-mode maybe not work right on your box? I'm not sure why it wouldn't, but you can convince me of just about anything by saying "Firefox does weird things on some GPUs".
    - saghm 4y ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... If it were me, I'd go for the <map> tag instead of fancy new CSS!

dizhn 4y ago

I don't know if this is the same way image maps were made in the early 90s but that's what I immediately thought of too.

ldjb 4y ago
<map> was introduced in HTML 3.2 in 1997. The other technique I often saw was to cut the image into a grid of separate image files. They would look to the user as if they were a single image, but you could hyperlink some of the images so the effect was that parts of the overall image were hyperlinked and some weren't. Developers came up with all kinds of interesting tricks in those days!
- yosito 4y ago
  My first websites were built like this. I'd design PSDs and then slice them into images that I'd place in tables. I completely forgot about that approach!

SquareWheel 4y ago

I had the same thought. I remember exporting image-based webpages in Macromedia Fireworks using HTML maps. No reason they shouldn't work today, even if they carry the same problems now as they did then (image-based websites are massive).

cantSpellSober 4y ago
What IDEs have a GUI for creating image maps anymore? Last one I remember using was in Macromedia Dreamweaver. > image-based websites are massive With the huge gains we've made in image optimization since <map>s were popular this isn't always true anymore.
- kevin_thibedeau 4y ago
  That's more due to the huge gains in javascript bloat offsetting the cost of images.
  - cantSpellSober 4y ago
    No it's due to image optimization. 5 bloated apps can easily be smaller than 1 bad gif.

notjustanymike 4y ago

Map is no good for SEO or WCAG though.

tacostakohashi 4y ago
Are images of handwritten text good for that?
- easrng 4y ago
  No, they aren't.
- cantSpellSober 4y ago
  Maybe there's an opportunity here with on-the-fly OCR. Imagine if a screen reader could really read.
  - eyelidlessness 4y ago
    I have to imagine some can, as the article mentions on the fly OCR of handwriting to generate the transcription, and I can select text from the handwriting on my phone (iOS 15 currently). I was initially surprised to see it’s not transparent text overlaying the image, but apparently the text recognition is actually that good.
  - jahewson 4y ago
    Safari already has this.
    - cantSpellSober 4y ago
      Safari has Live Text; that's just Google Lens with less features
  - yellow_postit 4y ago
    On the fly for each end user loading seems wasteful, why reprocess each time?

innocenat 4y ago

When I clicked the first link in the article, I though it was an image map too.

LukeShu 4y ago

AFAICT, there's not a way to get those nice hover effects with a <map>, at least not without a bunch of JS.

Groxx 4y ago
Yeah, my first thought was <map>, then I moused over it and noticed how utterly trivial this would be to re-style in comparison. This is a good approach, I think. It's kinda fine-tuned for reMarkable output, as it's mostly pure black or white pixels, but clearly they're fine with that. And the end result works quite well, and seems as easy or easier to implement. This is all also kinda made moot by there being a link to an excellent transcript at the bottom. Accessibility needs are better covered by a straightforward alternate page than <map> alone.
saghm 4y ago
Not sure if I triggered some sort of race with fast mouse movement or my mouse being over the link before it appeared or something, but for me on Firefox on Linux, the blue color went away when I hovered my mouse over a link. I'm not sure if that's really a benefit; it honestly confused me and made me think that I wasn't actually hovering over a link at first, since that's not how traditional links work.
- LukeShu 4y ago
  (Also on Firefox on Linux) I can't begin fathom how that could happen. It's not some fancy JS thing, it's a very simple CSS effect: a:hover { filter: opacity(0.5) !important; } .post a { background-color: #35c; mix-blend-mode: screen; position: absolute; display: block; } Do you maybe have a user-stylesheet that overrides something about links? But I can't think of anything that makes sense that wouldn't also break the non-hovering version too. Does opacity() combined with mix-blend-mode maybe not work right on your box? I'm not sure why it wouldn't, but you can convince me of just about anything by saying "Firefox does weird things on some GPUs".
  - saghm 4y ago