11 ms·

It's 2020 and I'm using image maps

213 points by sunnylemon 6y ago

fny 6y ago
I last used these in 2014 for a mobile web app that tracked muscle soreness. Worked like a charm, and I was also able to handle responsiveness with viewport aware JavaScript. I had to dig up an old copy of Fireworks to generate the polygons easily too.
egfx 6y ago
interesting mentions of the <blink> and <marquee> tags. I have a modern app that makes use of these properties for making gif's. blink will make any content in the gif flash on the canvas and marquee will move it side to side : https://imgur.com/rgHrsoa https://imgur.com/rgHrsoa
- perilunar 6y ago
  <blink> and <marquee> can be pretty much replicated with CSS animations — there's no need for the tags anymore.
  - deleted 6y ago
    [deleted]
  - egfx 6y ago
    You have to jump through a lot of hoops to replicate blink in css. https://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations https://stackoverflow.com/questions/13955163/imitating-a-bli...
kevsim 6y ago
I feel like I'm missing something. It seems like declare a <map> element, associate it with an <img>, but then use JS to iterate over the map and build a bunch of absolutely positioned <div> elements on top of the image. Why not just have the annotations stored outside the DOM (returned by API or whatever) and just build the absolutely positioned <div> elements? Wouldn't that avoid the fighting with funky coordinate systems, etc.? I get why <map> is (was?) useful in general, but if you're going to do your own annotation rendering on top anyway, it just seems odd. Fun exercise though!
- perilunar 6y ago
  If image maps only allowed rectangular areas, they wouldn't be terribly useful — you're right that it would be almost as easy to lay some transparent divs over the image. However... image maps also allow for circular and polygonal regions, which can be really handy. I guess you could also do that with a transparent SVG overlay, but using a map is easier.
  - kevsim 6y ago
    Right, but in this example, the author is laying divs on top of the map areas, and those need to be rectangles.
    - Sharlin 6y ago
      The annotation divs have to be rectangles, but the mouse/touch-sensitive areas of the underlying image don't! The author's goal is to only show an annotation if the user hovers over/touches its corresponding region in the image map.
Pmop 6y ago
> To make matters even more exciting, the last two coordinates might not be what you'd expect; when absolutely positioning items in CSS, right and bottom indicate the distance from the right and bottom edges respectively. In image maps, this holds no water. Instead, both horizontal coordinates are counted from the left edge and vertical coordinates from the top edge. Interesting. This order is commonly used by libraries like SDL and SFML to declare rectangular shapes.
- perilunar 6y ago
  I think the ordering of coordinates for map regions makes more sense than the css margin/padding order: rect: left, top, right, bottom circle: cx,cy,r poly: x1,y1,x2,y2,...
  - danellis 6y ago
    They both make sense for their respective use cases. An image has a fixed size. An HTML element does not necessarily. You can't measure the the right border from the left of an element if you don't know how big it is.
- danellis 6y ago
  That order has been used since the dawn of time. Well, since the dawn of graphics. I'm surprised at the author's surprise and I find it a little concerning.
- Const-me 6y ago
  Same in WinAPI, note the order of fields: https://docs.microsoft.com/en-us/windows/win32/api/windef/ns-windef-rect https://docs.microsoft.com/en-us/windows/win32/api/windef/ns... WinAPI is much older than 1995, these things were inherited from 16-bit Windows 3.x.
- jcfields 6y ago
  They're x, y pairs for the top-left and bottom-right corners of the rectangle. They're coordinates in the fourth quadrant of the Cartesian plane (i.e., with the origin conceptually in the top-left corner), which is also the way coordinates are given in most windowing systems (including X). This is more obvious when using the "poly" attribute rather than "rect," where you can have an arbitrary number of x, y pairs (and the browser automatically closes the shape by drawing a line between the last coordinate and the first). The way CSS orders border, margin, and padding values is clockwise starting from the top. But these aren't coordinates since they represent sides, not points, so I think the author is confusing things by comparing them.
skocznymroczny 6y ago
I still use tables for layouting because divs and messing with positioning/floating never really clicked for me.
- qubex 6y ago
  I’ve built a layout back-end that rapidly prototypes the web-page with custom metal type, quickly hammers it into a wooden frame, and then runs it through a printing press and scans the result, which is then saved as a PDF, compressed, and sent to the user’s gopher client.
- purerandomness 6y ago
  Flexbox (for one-dimensional layout) and Grid (for 2-dimensional layout) really improved the situation and finally made floating and positioning obsolete. There are plenty gamified learning tutorials like https://cssgridgarden.com/ https://cssgridgarden.com/
  - acomjean 6y ago
    And the flex box game. https://flexboxfroggy.com/ https://flexboxfroggy.com/ I like flexbox /grid: Though I've been staying with flexbox since I know it better. firefox has some really good grid inspection tools built in.
- ksec 6y ago
  Nothing wrong really. Tables used to sucks in IE era. But now IE is gone. Modern HTML Tables are fine as long as you know its limitations or basically dont try to do any fancy thing with it. For some strange reason I see people keep saying aviod table at all cost. I dont get it. May be someone could explain it better.
  - have_faith 6y ago
    > Modern HTML Tables are fine There are so many unpredictable edge cases to the magic of the table layout rendering algorithms that I would be hard pressed to recommend them for layout to anyone. I've seen the dark arts of what people do to make tables responsive and I want no part in it! But honestly though there is a whole host of simple layouts that are a breeze with Flexbox or Grid that require precise contortions of the mind to produce with tables and the hacky css required to coerce them into order.
bryanrasmussen 6y ago
I have considered recently I should make some things with imagemaps again, like there is untapped potential there I'm not clear of but that when I start working with it years of experience and new technologies will clarify.
- hugi 6y ago
  Make a web framework that renders the UI entirely as mapped images. A PNG would probably be faster to load and render than most of today's multi-megabyte JS monstrosities.
  - wwweston 6y ago
    Aaaaand it's 1996 again!
    - dependsontheq 6y ago
      No in 1996 we did everything with frames, I once worked with a team that designed a website consisting of 200 frames.
      - pzmarzly 6y ago
        How did it run? I can imagine it being super slow, but on the other hand in 2020 there are news sites that "need" hundreds of JS files to load.
  - kpozin 6y ago
    > Make a web framework that renders the UI entirely as mapped images. This is in fact what Microsoft Publisher (late 90s WYSIWYG web development tool) used to do if you dared to make any page elements overlap.
  - draw_down 6y ago
    Screen readers, SEO, ad block, ctrl-F can all go to hell!
meerita 6y ago
To me looks like it's fun to develop but impractical to use. Today you can go cleaner and scalable with css-grid, flex and other proper HTML elements. It was a nice article though
dmitryminkovsky 6y ago
Was just thinking of using an image map the other day! My dad has a camera collection and it would be cool to take a picture of it and then map prices of the picture to links about each camera. Haven’t gotten their yet though.
Acconut 6y ago
The author seems to be have written this post based on work for an in-browser video editor (https://videoinu.com/editor https://videoinu.com/editor). It runs completely on the client-side, so all the editing, previewing, rendering, and exporting is done using web technologies. Of course, it's not comparable to a professional editing tools but nevertheless that's very impressive achievement in my opinion!
- app4soft 6y ago
  > It runs completely on the client-side, so all the editing, previewing, rendering, and exporting is done using web technologies. If so, why just not use native desktop/mobile video editor app instead?
  - davidmurdoch 6y ago
    Because you'd have to download an app like this and then trust that it won't install malware or spyware or do anything else malicious.
    - app4soft 6y ago
      > Because you'd have to download an app like this and then trust that it won't install malware or spyware or do anything else malicious. How you would check that web app, which JavaScript/WebAssembly source/binary should be firstly loaded into your browser from 3rd-party website, would not "install malware or spyware or do anything else malicious"?
      - alex_duf 6y ago
        That's as trustworthy as your web browser, which is pretty good at sandboxing nowadays.
        app4soft 6y ago
        Has you ever read changelogs of Firefox & Chrome/Chromium? There are tons of issues documented related to sandboxing & security each new release happen.
turnipla 6y ago
And that’s a bad idea. HTML images maps are not responsive. Just use SVG, it works without any scripts and it resizes with the image. If you use <foreignObject> you can also use a fully responsive <picture> tag
- turnipla 6y ago
  Downvoted why? I told the truth. Why would you use an antiquated feature that's not up to par with SVG? The absolutely ridiculous part of this is that they're using JS to create additional DIVs on top of the image. Why use the map at all? Edit: May 20th 2020: the day I learned HN users are retarded
jtwaleson 6y ago
Wow, blast from the past. I remembered building a website using image maps 13 years ago. Just checked and it's still being used even though I stopped being the webmaster 12 years ago, works great! Never realized it was considered obsolete even then.
max23_ 6y ago
On a side note, LINE Messaging API support sending image map message[0] where you can have multiple tappable areas. [0] https://developers.line.biz/en/reference/messaging-api/#imagemap-message https://developers.line.biz/en/reference/messaging-api/#imag...
rikroots 6y ago
I used to love image maps: really useful for adding hotlinks and hover effects to images. Sadly they can't deal with the modern responsive web - though there exist some Wordpress plugins to help overcome that issue. This CSS article[1] goes into details about alternative approaches. It mainly seems to be SVG, or CSS clip paths. I've used (and like) SVG; CSS clip paths are foreign territory to me - has anyone used them in production to replicate image map functionality? One of the goals I made for myself when developing my canvas library[2] was to bring image-map-like functionality to the <canvas> element - but as responsive and accessible as I could make it. It's still a work-in-progress but I'm getting there! [1] - https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/ https://css-tricks.com/the-many-ways-to-link-up-shapes-and-i... [1] Scrawl-canvas - https://scrawl-v8.rikweb.org.uk/ https://scrawl-v8.rikweb.org.uk/
- 52-6F-62 6y ago
  I do like the example with the pins/labels on an image. Seems like it would be useful for something like Wikipedia or recipes, etc. Is it accessible-friendly?
  - rikroots 6y ago
    Thank you! It tries to be. You should be able to tab through the pins using the keyboard, and 'click' a pin by pressing the return button (mileage may vary between browsers and devices). The text labels and links themselves also exist inside <div> elements immediately following the <canvas> element (automatically added by the library when it picks up a canvas, and when creating canvas text and links) ... but I don't know how useful/convenient this is for users restricted to screen readers.
- winrid 6y ago
  Don't CSS transforms work on image maps? I bet you could do some media query magic + scale() to make it work.
hawski 6y ago
This reminds me of a benchmark of sorts, that gave a ratio of the size of a whole size to the size of its image rendered as JPEG. One could think of a map overlay to bring back some interactivity. Does anyone remember it? It was once featured on HN, but I can't find it now.
- btrettel 6y ago
  Could be this: https://www.webbloatscore.com/ https://www.webbloatscore.com/ https://news.ycombinator.com/item?id=12783898 https://news.ycombinator.com/item?id=12783898
  - hawski 6y ago
    Thanks, that's it!
dillonmckay 6y ago
I still use this on one of the Wordpress sites I maintain. The client insisted on an actual tree for the landing page, and clickable circles as ‘fruit’ for each of the navigational choices. But, yes, I remember doing this in the late 90s. We still have animated GIFs, too.
taf2 6y ago
I feel like canvas tag plus image maps work really well together
- ooobit2 6y ago
  Terrible for accessibility though. I'm sure screen readers have come a long way, but the core issue we dealt with 15-20 years ago was that the convenience of an imap wasn't worth breaking accessibility standards. With more of our traditional desktop services having moved to mobile and now moving back to the browser, I'm more concerned about this creating another wave of accessibility limitations caused by a petty convenience for dev. I don't want to sound off like an activist, but I'd like to see that someone with limited mobility or sight can equitably access services they, as much as we, will sooner or later have to depend on as current apps and software lose support and phase out. The Net has always been a place where a person's only limitation should be their choice to not commit their time to learning how to use it. Let's stand by that now more than ever, or I fear we'll hand an uncontested victory to the idiots in Silicon Valley who want us to adapt to how they want us to use the Net.
tyingq 6y ago
Pretty clever use of old tech. I think I probably would have tried embedding the raster image in an svg[1], then overlay shapes for hover or click events. [1] https://css-tricks.com/lodge/svg/31-can-put-raster-images-svg/ https://css-tricks.com/lodge/svg/31-can-put-raster-images-sv...
michaelmior 6y ago
> we'll be revisiting this opinion once responsive websites with their (gasp) automatically resizing images are out of fashion. Will this ever happen? We won't stop having radically differently sized devices any time soon. Of course I'm sure eventually the "responsive" approach will give way to other techniques but I can't really see the high-level approach disappearing.
tech-historian 6y ago
I'm reminded of the first image map I ever saw -- Microsoft's 1994 homepage: https://www.versionmuseum.com/images/websites/microsoft-website/microsoft-website%5E1994%5Ehomepage.gif https://www.versionmuseum.com/images/websites/microsoft-webs...
- dpcan 6y ago
  I remember seeing image maps for the first time as well. I can't remember exactly what they were for (possibly the Yahoo logo when it had circular buttons around it), but I distinctly remember the feeling of being able to click on an area of an image and something different happening. It floored me at the time because it was, in my mind, when Dorothy opened the door to Oz and a huge, beautiful world just appeared before her. It's very strange to be in an age group that gets to remember being in a world before and after image maps (among ALL the other tech that erupted in the last 30 years). The best part of it is that as soon as we saw it.... we could reproduce it. I viewed-source and started creating my own image maps on my personal websites immediately. Then showed these to friends and family and they were so impressed :) .... I find myself trying to recreate this feeling all the time.
  - 101008 6y ago
    I couldn't agree more with your feelings, it was beautiful at the time. I remember I spent hours visiting websites with JS snippets, to do simple things, the web felt so much amateur and collaborative. Seeing it now through the times, I think the difference was that to create an amateur website, you don't need to understand a lot of techs, just HTML and how to use a FTP software. Now everything seems much more complex. Anyway, I just wanted to tell my experience with Image Maps. A friend of mine had a much better CPU, where his father also worked creating websites, and he had Macromedia Dreamweaver. He could create image maps with the cursor, clicking here and there, and it was amazing. Meanwhile, in my house, my CPU only allowed me to run stuff like Notepad++, which meant I had to memorize my friend's code, running back home, start typing it and trying to understand how it worked to modify it at my piacere. The best feeling in the world was when the click did what I expected in the area I wanted. What a feeling.
prakhunov 6y ago
This brings me back to the time of when I used Photoshop 5 to create the entire website design and layout, create slices, and export to HTML which was then by edited by Dreamweaver.
- edgarvaldes 6y ago
  Adobe Fireworks was great for that.
  - reaperducer 6y ago
    Adobe I think you misspelled Macromedia. ;)
at_a_remove 6y ago
It's funny this came up. I've been doing webstuff and getting paid for it since about 1996 or 1997; imagemaps were a pretty big deal back then. Recently, I found myself thinking, "How do they do that these days?" I have gotten out of the webbish stuff and even before that, I tended to stick to the tried and true. I don't think the need for something very much like imagemaps will ever go away. The lure of arbitrary polygons and paths cut from an image needing to be clickable is high, and I think the ability to join up a bunch of polygonal (or worse) images and have them well-aligned is far off. It's easier to cut up than to re-align.
- jes5199 6y ago
  the modern web just doesn’t do that, though. I don’t think I’ve seen a clickable polygon in the last 15 years
  - neutronicus 6y ago
    Arbitrary polygons are, after all, not that easy to click in general.
  - gwright 6y ago
    the most obvious modern use case that comes to mind is maps or more generally geospatial visualization tools
  - adrianmonk 6y ago
    My city's COVID-19 map breaks it down by clickable zip code regions.
  - reaperducer 6y ago
    I saw a site not too long ago that had a map of U.S. states with state changes on hover and click. It was just a bunch of SVG's in an <ul>. So it's possible, but it takes some braining.
- jsf01 6y ago
  The answer is usually to use SVG. You see this in most maps and charts with clickable or interactive areas. For cases where you need a raster image to have clickable regions, like showing plots of land or property boundaries on a real estate website, you might see a mix of a raster image below a semitransparent SVG overlay or just a <canvas> element instead, which would have to manually reimplement handling clicks and hover events on the various regions.
29athrowaway 6y ago
90s starter pack: Framesets, image maps, marquees, blink, guestbooks, visit counters, "under construction", "webmaster", tiled backgrounds. The weirdest: MIDI music on autoplay, VRML.
- knbknb 6y ago
  Java Applets, Dynamic HTML, Perl/CGI, executable email attachments, MSIE vs Netscape
  - 29athrowaway 6y ago
    Download managers, ICQ.
Minor49er 6y ago
Image maps were great. I used them for a site's nav that needed some slight visual flair (item entries had to be diplayed at a slight angle with a custom font). To reduce the bandwidth, the entire nav's text was a single image with transparency. Then the backing would be either a red or green angled rectangle. The text had a mapping over it that would change the background rectangle depending on what area you hovered. It made for a great effect.
wilsonrocks 6y ago
I'm now curious as to whether you could animate the image map along with what it displayed to make some sort of game. With a JS animation library if the actual css properties aren't animatable
wired_devil 6y ago
And it is fine! This website uses table for layout, so...

213 points by sunnylemon 6y ago

fny 6y ago

I last used these in 2014 for a mobile web app that tracked muscle soreness. Worked like a charm, and I was also able to handle responsiveness with viewport aware JavaScript. I had to dig up an old copy of Fireworks to generate the polygons easily too.

egfx 6y ago

interesting mentions of the <blink> and <marquee> tags. I have a modern app that makes use of these properties for making gif's. blink will make any content in the gif flash on the canvas and marquee will move it side to side : https://imgur.com/rgHrsoa https://imgur.com/rgHrsoa

perilunar 6y ago
<blink> and <marquee> can be pretty much replicated with CSS animations — there's no need for the tags anymore.
- deleted 6y ago
  [deleted]
- egfx 6y ago
  You have to jump through a lot of hoops to replicate blink in css. https://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations https://stackoverflow.com/questions/13955163/imitating-a-bli...

kevsim 6y ago

I feel like I'm missing something. It seems like declare a <map> element, associate it with an <img>, but then use JS to iterate over the map and build a bunch of absolutely positioned <div> elements on top of the image. Why not just have the annotations stored outside the DOM (returned by API or whatever) and just build the absolutely positioned <div> elements? Wouldn't that avoid the fighting with funky coordinate systems, etc.? I get why <map> is (was?) useful in general, but if you're going to do your own annotation rendering on top anyway, it just seems odd. Fun exercise though!

perilunar 6y ago
If image maps only allowed rectangular areas, they wouldn't be terribly useful — you're right that it would be almost as easy to lay some transparent divs over the image. However... image maps also allow for circular and polygonal regions, which can be really handy. I guess you could also do that with a transparent SVG overlay, but using a map is easier.
- kevsim 6y ago
  Right, but in this example, the author is laying divs on top of the map areas, and those need to be rectangles.
  - Sharlin 6y ago
    The annotation divs have to be rectangles, but the mouse/touch-sensitive areas of the underlying image don't! The author's goal is to only show an annotation if the user hovers over/touches its corresponding region in the image map.

Pmop 6y ago

> To make matters even more exciting, the last two coordinates might not be what you'd expect; when absolutely positioning items in CSS, right and bottom indicate the distance from the right and bottom edges respectively. In image maps, this holds no water. Instead, both horizontal coordinates are counted from the left edge and vertical coordinates from the top edge. Interesting. This order is commonly used by libraries like SDL and SFML to declare rectangular shapes.

perilunar 6y ago
I think the ordering of coordinates for map regions makes more sense than the css margin/padding order: rect: left, top, right, bottom circle: cx,cy,r poly: x1,y1,x2,y2,...
- danellis 6y ago
  They both make sense for their respective use cases. An image has a fixed size. An HTML element does not necessarily. You can't measure the the right border from the left of an element if you don't know how big it is.
danellis 6y ago
That order has been used since the dawn of time. Well, since the dawn of graphics. I'm surprised at the author's surprise and I find it a little concerning.
Const-me 6y ago
Same in WinAPI, note the order of fields: https://docs.microsoft.com/en-us/windows/win32/api/windef/ns-windef-rect https://docs.microsoft.com/en-us/windows/win32/api/windef/ns... WinAPI is much older than 1995, these things were inherited from 16-bit Windows 3.x.
jcfields 6y ago
They're x, y pairs for the top-left and bottom-right corners of the rectangle. They're coordinates in the fourth quadrant of the Cartesian plane (i.e., with the origin conceptually in the top-left corner), which is also the way coordinates are given in most windowing systems (including X). This is more obvious when using the "poly" attribute rather than "rect," where you can have an arbitrary number of x, y pairs (and the browser automatically closes the shape by drawing a line between the last coordinate and the first). The way CSS orders border, margin, and padding values is clockwise starting from the top. But these aren't coordinates since they represent sides, not points, so I think the author is confusing things by comparing them.

skocznymroczny 6y ago

I still use tables for layouting because divs and messing with positioning/floating never really clicked for me.

qubex 6y ago
I’ve built a layout back-end that rapidly prototypes the web-page with custom metal type, quickly hammers it into a wooden frame, and then runs it through a printing press and scans the result, which is then saved as a PDF, compressed, and sent to the user’s gopher client.
purerandomness 6y ago
Flexbox (for one-dimensional layout) and Grid (for 2-dimensional layout) really improved the situation and finally made floating and positioning obsolete. There are plenty gamified learning tutorials like https://cssgridgarden.com/ https://cssgridgarden.com/
- acomjean 6y ago
  And the flex box game. https://flexboxfroggy.com/ https://flexboxfroggy.com/ I like flexbox /grid: Though I've been staying with flexbox since I know it better. firefox has some really good grid inspection tools built in.
ksec 6y ago
Nothing wrong really. Tables used to sucks in IE era. But now IE is gone. Modern HTML Tables are fine as long as you know its limitations or basically dont try to do any fancy thing with it. For some strange reason I see people keep saying aviod table at all cost. I dont get it. May be someone could explain it better.
- have_faith 6y ago
  > Modern HTML Tables are fine There are so many unpredictable edge cases to the magic of the table layout rendering algorithms that I would be hard pressed to recommend them for layout to anyone. I've seen the dark arts of what people do to make tables responsive and I want no part in it! But honestly though there is a whole host of simple layouts that are a breeze with Flexbox or Grid that require precise contortions of the mind to produce with tables and the hacky css required to coerce them into order.

bryanrasmussen 6y ago

I have considered recently I should make some things with imagemaps again, like there is untapped potential there I'm not clear of but that when I start working with it years of experience and new technologies will clarify.

hugi 6y ago
Make a web framework that renders the UI entirely as mapped images. A PNG would probably be faster to load and render than most of today's multi-megabyte JS monstrosities.
- wwweston 6y ago
  Aaaaand it's 1996 again!
  - dependsontheq 6y ago
    No in 1996 we did everything with frames, I once worked with a team that designed a website consisting of 200 frames.
    - pzmarzly 6y ago
      How did it run? I can imagine it being super slow, but on the other hand in 2020 there are news sites that "need" hundreds of JS files to load.
- kpozin 6y ago
  > Make a web framework that renders the UI entirely as mapped images. This is in fact what Microsoft Publisher (late 90s WYSIWYG web development tool) used to do if you dared to make any page elements overlap.
- draw_down 6y ago
  Screen readers, SEO, ad block, ctrl-F can all go to hell!

meerita 6y ago

To me looks like it's fun to develop but impractical to use. Today you can go cleaner and scalable with css-grid, flex and other proper HTML elements. It was a nice article though

dmitryminkovsky 6y ago

Was just thinking of using an image map the other day! My dad has a camera collection and it would be cool to take a picture of it and then map prices of the picture to links about each camera. Haven’t gotten their yet though.

Acconut 6y ago

The author seems to be have written this post based on work for an in-browser video editor (https://videoinu.com/editor https://videoinu.com/editor). It runs completely on the client-side, so all the editing, previewing, rendering, and exporting is done using web technologies. Of course, it's not comparable to a professional editing tools but nevertheless that's very impressive achievement in my opinion!

app4soft 6y ago
> It runs completely on the client-side, so all the editing, previewing, rendering, and exporting is done using web technologies. If so, why just not use native desktop/mobile video editor app instead?
- davidmurdoch 6y ago
  Because you'd have to download an app like this and then trust that it won't install malware or spyware or do anything else malicious.
  - app4soft 6y ago
    > Because you'd have to download an app like this and then trust that it won't install malware or spyware or do anything else malicious. How you would check that web app, which JavaScript/WebAssembly source/binary should be firstly loaded into your browser from 3rd-party website, would not "install malware or spyware or do anything else malicious"?
    - alex_duf 6y ago
      That's as trustworthy as your web browser, which is pretty good at sandboxing nowadays.
      - app4soft 6y ago
        Has you ever read changelogs of Firefox & Chrome/Chromium? There are tons of issues documented related to sandboxing & security each new release happen.

turnipla 6y ago

And that’s a bad idea. HTML images maps are not responsive. Just use SVG, it works without any scripts and it resizes with the image. If you use <foreignObject> you can also use a fully responsive <picture> tag

turnipla 6y ago
Downvoted why? I told the truth. Why would you use an antiquated feature that's not up to par with SVG? The absolutely ridiculous part of this is that they're using JS to create additional DIVs on top of the image. Why use the map at all? Edit: May 20th 2020: the day I learned HN users are retarded

jtwaleson 6y ago

Wow, blast from the past. I remembered building a website using image maps 13 years ago. Just checked and it's still being used even though I stopped being the webmaster 12 years ago, works great! Never realized it was considered obsolete even then.

max23_ 6y ago

On a side note, LINE Messaging API support sending image map message[0] where you can have multiple tappable areas. [0] https://developers.line.biz/en/reference/messaging-api/#imagemap-message https://developers.line.biz/en/reference/messaging-api/#imag...

rikroots 6y ago

I used to love image maps: really useful for adding hotlinks and hover effects to images. Sadly they can't deal with the modern responsive web - though there exist some Wordpress plugins to help overcome that issue. This CSS article[1] goes into details about alternative approaches. It mainly seems to be SVG, or CSS clip paths. I've used (and like) SVG; CSS clip paths are foreign territory to me - has anyone used them in production to replicate image map functionality? One of the goals I made for myself when developing my canvas library[2] was to bring image-map-like functionality to the <canvas> element - but as responsive and accessible as I could make it. It's still a work-in-progress but I'm getting there! [1] - https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/ https://css-tricks.com/the-many-ways-to-link-up-shapes-and-i... [1] Scrawl-canvas - https://scrawl-v8.rikweb.org.uk/ https://scrawl-v8.rikweb.org.uk/

52-6F-62 6y ago
I do like the example with the pins/labels on an image. Seems like it would be useful for something like Wikipedia or recipes, etc. Is it accessible-friendly?
- rikroots 6y ago
  Thank you! It tries to be. You should be able to tab through the pins using the keyboard, and 'click' a pin by pressing the return button (mileage may vary between browsers and devices). The text labels and links themselves also exist inside <div> elements immediately following the <canvas> element (automatically added by the library when it picks up a canvas, and when creating canvas text and links) ... but I don't know how useful/convenient this is for users restricted to screen readers.
winrid 6y ago
Don't CSS transforms work on image maps? I bet you could do some media query magic + scale() to make it work.

hawski 6y ago

This reminds me of a benchmark of sorts, that gave a ratio of the size of a whole size to the size of its image rendered as JPEG. One could think of a map overlay to bring back some interactivity. Does anyone remember it? It was once featured on HN, but I can't find it now.

btrettel 6y ago
Could be this: https://www.webbloatscore.com/ https://www.webbloatscore.com/ https://news.ycombinator.com/item?id=12783898 https://news.ycombinator.com/item?id=12783898
- hawski 6y ago
  Thanks, that's it!

dillonmckay 6y ago

I still use this on one of the Wordpress sites I maintain. The client insisted on an actual tree for the landing page, and clickable circles as ‘fruit’ for each of the navigational choices. But, yes, I remember doing this in the late 90s. We still have animated GIFs, too.

taf2 6y ago

I feel like canvas tag plus image maps work really well together

ooobit2 6y ago
Terrible for accessibility though. I'm sure screen readers have come a long way, but the core issue we dealt with 15-20 years ago was that the convenience of an imap wasn't worth breaking accessibility standards. With more of our traditional desktop services having moved to mobile and now moving back to the browser, I'm more concerned about this creating another wave of accessibility limitations caused by a petty convenience for dev. I don't want to sound off like an activist, but I'd like to see that someone with limited mobility or sight can equitably access services they, as much as we, will sooner or later have to depend on as current apps and software lose support and phase out. The Net has always been a place where a person's only limitation should be their choice to not commit their time to learning how to use it. Let's stand by that now more than ever, or I fear we'll hand an uncontested victory to the idiots in Silicon Valley who want us to adapt to how they want us to use the Net.

tyingq 6y ago

Pretty clever use of old tech. I think I probably would have tried embedding the raster image in an svg[1], then overlay shapes for hover or click events. [1] https://css-tricks.com/lodge/svg/31-can-put-raster-images-svg/ https://css-tricks.com/lodge/svg/31-can-put-raster-images-sv...

michaelmior 6y ago

> we'll be revisiting this opinion once responsive websites with their (gasp) automatically resizing images are out of fashion. Will this ever happen? We won't stop having radically differently sized devices any time soon. Of course I'm sure eventually the "responsive" approach will give way to other techniques but I can't really see the high-level approach disappearing.

tech-historian 6y ago

I'm reminded of the first image map I ever saw -- Microsoft's 1994 homepage: https://www.versionmuseum.com/images/websites/microsoft-website/microsoft-website%5E1994%5Ehomepage.gif https://www.versionmuseum.com/images/websites/microsoft-webs...

dpcan 6y ago
I remember seeing image maps for the first time as well. I can't remember exactly what they were for (possibly the Yahoo logo when it had circular buttons around it), but I distinctly remember the feeling of being able to click on an area of an image and something different happening. It floored me at the time because it was, in my mind, when Dorothy opened the door to Oz and a huge, beautiful world just appeared before her. It's very strange to be in an age group that gets to remember being in a world before and after image maps (among ALL the other tech that erupted in the last 30 years). The best part of it is that as soon as we saw it.... we could reproduce it. I viewed-source and started creating my own image maps on my personal websites immediately. Then showed these to friends and family and they were so impressed :) .... I find myself trying to recreate this feeling all the time.
- 101008 6y ago
  I couldn't agree more with your feelings, it was beautiful at the time. I remember I spent hours visiting websites with JS snippets, to do simple things, the web felt so much amateur and collaborative. Seeing it now through the times, I think the difference was that to create an amateur website, you don't need to understand a lot of techs, just HTML and how to use a FTP software. Now everything seems much more complex. Anyway, I just wanted to tell my experience with Image Maps. A friend of mine had a much better CPU, where his father also worked creating websites, and he had Macromedia Dreamweaver. He could create image maps with the cursor, clicking here and there, and it was amazing. Meanwhile, in my house, my CPU only allowed me to run stuff like Notepad++, which meant I had to memorize my friend's code, running back home, start typing it and trying to understand how it worked to modify it at my piacere. The best feeling in the world was when the click did what I expected in the area I wanted. What a feeling.

prakhunov 6y ago

This brings me back to the time of when I used Photoshop 5 to create the entire website design and layout, create slices, and export to HTML which was then by edited by Dreamweaver.

edgarvaldes 6y ago
Adobe Fireworks was great for that.
- reaperducer 6y ago
  Adobe I think you misspelled Macromedia. ;)

at_a_remove 6y ago

It's funny this came up. I've been doing webstuff and getting paid for it since about 1996 or 1997; imagemaps were a pretty big deal back then. Recently, I found myself thinking, "How do they do that these days?" I have gotten out of the webbish stuff and even before that, I tended to stick to the tried and true. I don't think the need for something very much like imagemaps will ever go away. The lure of arbitrary polygons and paths cut from an image needing to be clickable is high, and I think the ability to join up a bunch of polygonal (or worse) images and have them well-aligned is far off. It's easier to cut up than to re-align.

jes5199 6y ago
the modern web just doesn’t do that, though. I don’t think I’ve seen a clickable polygon in the last 15 years
- neutronicus 6y ago
  Arbitrary polygons are, after all, not that easy to click in general.
- gwright 6y ago
  the most obvious modern use case that comes to mind is maps or more generally geospatial visualization tools
- adrianmonk 6y ago
  My city's COVID-19 map breaks it down by clickable zip code regions.
- reaperducer 6y ago
  I saw a site not too long ago that had a map of U.S. states with state changes on hover and click. It was just a bunch of SVG's in an <ul>. So it's possible, but it takes some braining.
jsf01 6y ago
The answer is usually to use SVG. You see this in most maps and charts with clickable or interactive areas. For cases where you need a raster image to have clickable regions, like showing plots of land or property boundaries on a real estate website, you might see a mix of a raster image below a semitransparent SVG overlay or just a <canvas> element instead, which would have to manually reimplement handling clicks and hover events on the various regions.

29athrowaway 6y ago

90s starter pack: Framesets, image maps, marquees, blink, guestbooks, visit counters, "under construction", "webmaster", tiled backgrounds. The weirdest: MIDI music on autoplay, VRML.

knbknb 6y ago
Java Applets, Dynamic HTML, Perl/CGI, executable email attachments, MSIE vs Netscape
- 29athrowaway 6y ago
  Download managers, ICQ.

Minor49er 6y ago

Image maps were great. I used them for a site's nav that needed some slight visual flair (item entries had to be diplayed at a slight angle with a custom font). To reduce the bandwidth, the entire nav's text was a single image with transparency. Then the backing would be either a red or green angled rectangle. The text had a mapping over it that would change the background rectangle depending on what area you hovered. It made for a great effect.

wilsonrocks 6y ago

I'm now curious as to whether you could animate the image map along with what it displayed to make some sort of game. With a JS animation library if the actual css properties aren't animatable

wired_devil 6y ago

And it is fine! This website uses table for layout, so...