[HN Gopher] Revisiting Image Maps
___________________________________________________________________
Revisiting Image Maps
Author : thm
Score : 67 points
Date : 2025-05-09 13:44 UTC (4 days ago)
(HTM) web link (css-tricks.com)
(TXT) w3m dump (css-tricks.com)
| ag8 wrote:
| wow, I used to make so many games with image maps back when I
| first learned HTML. One still survives:
| https://andrew.fi/beowulf/game/
| bni wrote:
| Thanks for posting this.
|
| I met the dragon and died I think.
| chrismorgan wrote:
| There is no way to defeat the evil dragon Hrathogwar. View
| the page sources to more easily traverse the URL graph, and
| confirm there is no escape. You can wander back and forth
| forever, but if you try to progress, to make Hrothgar happy,
| you get stuck.
| mikeocool wrote:
| I feel like you were ahead of the trend with the visual style
| in this game.
| M95D wrote:
| This is all because of web standards playing catch-up with
| implementations instead of the other way around.
| notarealllama wrote:
| TFA takes us on this journey and then at the end, "Image maps
| ended up not working for us" without telling us what they did. My
| money is on JavaScript for that "expressive" aspect of the hover.
| chrismorgan wrote:
| The last third describes exactly what he did.
| chrismorgan wrote:
| > _My first thought was to embed anchors into the external map
| SVG: [...]_
|
| > _This approach is problematic. Those anchors are only active
| when SVG is inline and don't work with an <img> element._
|
| No, this approach is fine: you just need to use <object data=...>
| instead of <img src=...>. <object> is the correct choice for
| embedding interactive SVG.
|
| But you probably do want the SVG to be inline anyway, because it
| will load faster and is in this case actively the content of the
| page; which is the technical decision he ended up at, though
| perhaps for partly the wrong reason.
|
| (There's also <iframe>.)
| King-Aaron wrote:
| > There's also <iframe>
|
| Now that's a name I've not heard in a long time...a long time.
| zyberzero wrote:
| Really? I'd say image maps was the name I haven't heard in a
| long time... As in I read a couple of paragraphs before it
| dawned on me that it was _that_ type of image maps that post
| was about - I first thought it was something regarding
| rasterized maps (like OpenStreetMap or something)
| ogou wrote:
| If you're looking at any web page with ads or tracking, it
| has many iframe elements. The javascript that loads them
| usually creates an iframe and the ad appears there. A typical
| newspaper site could have 5-50 iframes on each page.
| patates wrote:
| Perhaps you confused it with the frameset and frame?
|
| frameset: https://developer.mozilla.org/en-
| US/docs/Web/HTML/Reference/...
|
| frame: https://developer.mozilla.org/en-
| US/docs/Web/HTML/Reference/...
|
| iframe: https://developer.mozilla.org/en-
| US/docs/Web/HTML/Reference/...
| seabass wrote:
| > 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.
|
| If you're trying something like this and irregular-shaped
| clickable areas are not a concern (like if only the numbered
| circles from the article's example would be clickable) then
| absolutely positioned anchors can be made to work. The trick is
| to use js to apply a css scale transformation to a relatively
| positioned parent container whenever the underlying image changes
| size.
| abanana wrote:
| My thought when reading that in the article was (in cases
| where, as you said, irregular-shaped clickable areas are not a
| concern): why do we need pixel-based positioning? What's wrong
| with percentage-based positioning and sizing? I did exactly
| that a couple of years ago, and it worked as expected.
| danhite wrote:
| for those of you using something like their technique of opacity
| animating a clip-path region from one look to another upon ~click
| ...
|
| if you wish to be visually kind to safari users you can eliminate
| the default gray selection indication flash animation safari does
| upon a tap activation with just a tiny bit of webkit-only css ,
| for example ...
|
| #links { -webkit-tap-highlight-color : transparent ; }
|
| added to the css of their codepen fixes it (without causing any
| issues for other/std browsers afaik)
| deanc wrote:
| I've spent five minutes now, to no avail, trying to find a link
| to this website.
| bigwheeler wrote:
| I think I read somewhere else that it is not publicly launched
| yet, but should be very soon.
___________________________________________________________________
(page generated 2025-05-13 23:02 UTC)