5 ms·

Wow! When I saw "image map" on the title I thought this can't actually be talking about the HTML image map. Image map reminds me of HTML from the late 90s, and

by godot 8y ago

Wow! When I saw "image map" on the title I thought this can't actually be talking about the HTML image map. Image map reminds me of HTML from the late 90s, and give me a good nostalgia of making personal homepages from that time. With invisible clickable divs, absolute positioning css and what not, it seems like image map has become a thing of the past. I'm guessing the requirement of making it work with no JS took you to the path of using image maps. Neat technique.

ravenstine 8y ago
I always thought the map element was an underutilized feature. When I was a kid I really enjoyed glorified mazes like the Bone Garden Estate, which inspired me to make my own stateless "games" using MSPaint and HTML. It didn't really teach me anything about programming, but it seemed like such a novel thing to put hyperlinks on parts of images. https://web.archive.org/web/20010301200926/http://www.bonegarden.com/ https://web.archive.org/web/20010301200926/http://www.bonega...
- petercooper 8y ago
  Just want to say thanks for bringing this to my attention. I really want to go through it! I was also very surprised the sound effect still works using the <embed> tag!
  - ravenstine 8y ago
    In retrospect, it's not very good. lol! But when I was 10 years old, the idea of a virtual haunted house(and being able to inspect the HTML) was really cool. I suppose it's one of the things that inspired me to become the web developer I am today.
epitactic 8y ago
Indeed, image maps seemed to be the simplest way to implement this, fitting into my goal of reducing the complexity of the content rendered on the web client. I still use CSS, but only in one place (for showing the cached timestamp in the corner). Technically I do use JavaScript, although only for getting the window dimensions, and it is optional. An absolutely positioned CSS div is an interesting idea, if I recall correctly I actually tried this first, but ran into various problems (with scaling as the page is zoomed in/out, I think) and the image map worked perfectly. area shape="rect" works well as it translates directly from puppeteer's await page $$('a') boundingBox().

by godot 8y ago

ravenstine 8y ago

I always thought the map element was an underutilized feature. When I was a kid I really enjoyed glorified mazes like the Bone Garden Estate, which inspired me to make my own stateless "games" using MSPaint and HTML. It didn't really teach me anything about programming, but it seemed like such a novel thing to put hyperlinks on parts of images. https://web.archive.org/web/20010301200926/http://www.bonegarden.com/ https://web.archive.org/web/20010301200926/http://www.bonega...

petercooper 8y ago
Just want to say thanks for bringing this to my attention. I really want to go through it! I was also very surprised the sound effect still works using the <embed> tag!
- ravenstine 8y ago
  In retrospect, it's not very good. lol! But when I was 10 years old, the idea of a virtual haunted house(and being able to inspect the HTML) was really cool. I suppose it's one of the things that inspired me to become the web developer I am today.

epitactic 8y ago

Indeed, image maps seemed to be the simplest way to implement this, fitting into my goal of reducing the complexity of the content rendered on the web client. I still use CSS, but only in one place (for showing the cached timestamp in the corner). Technically I do use JavaScript, although only for getting the window dimensions, and it is optional. An absolutely positioned CSS div is an interesting idea, if I recall correctly I actually tried this first, but ran into various problems (with scaling as the page is zoomed in/out, I think) and the image map worked perfectly. area shape="rect" works well as it translates directly from puppeteer's await page $$('a') boundingBox().