Remix.run Logo
BorisMelnik 2 hours ago

oh man <map> and <area> yes kids today just don't know the pain we went through.

this is back when every single byte mattered and saving a few MB was the difference between a good user experience and a bad one.

for those that never used this, you would do something like

<img src="funnycats.jpg" usemap="#funnycats-map">

<!-- the map defines clickable zones --> <map name="funnycats-map"> <shape="rect" coords="34,44,270,350" href="cats.html"> </map>

most ppl used something like Dreamweaver but bad-asses would do their own coordinates.

gavinray 2 hours ago | parent [-]

My web dev experience began right before ES6, when browsers still did not do parallel asset loads and so spritesheets were common

Why could you not have defined elements overlayed using high z index that were clickable, like invisible divs?

jgraham an hour ago | parent [-]

Server side image maps predate javascript. They were in early versions of Mosaic.

Client side image maps and the script element were (AFAICT) both introduced in Netscape 2.

Even when scripting was introduced, you didn't necessarily have the ability to move elements around freely on the page. I think (but I'm not certain) that it wasn't until Netscape 4 era that you had enough layout primitives to implement the multi-layer positioning approach to custom clickable areas.

gavinray 26 minutes ago | parent [-]

With plain HTML you could have done this, though?

  <div class="image-map">
    <img src="funnycats.jpg">
    <a
      href="cats.html"
      style="position:absolute; background: transparent; left: 8.5%; top: 12.5%; width: 59%; height: 87%;"
    ></a>
  </div>