The author seems to be have written this post based on work for an in-browser video editor (<a href="https://videoinu.com/editor" rel="nofollow">https://videoinu.com/editor</a>). 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!
> 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.<p>Interesting. This order is commonly used by libraries like SDL and SFML to declare rectangular shapes.
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.<p>I don't think the need for something very much <i>like</i> 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.
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.?<p>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!
I'm reminded of the first image map I ever saw -- Microsoft's 1994 homepage:<p><a href="https://www.versionmuseum.com/images/websites/microsoft-website/microsoft-website%5E1994%5Ehomepage.gif" rel="nofollow">https://www.versionmuseum.com/images/websites/microsoft-webs...</a>
I still use this on one of the Wordpress sites I maintain.<p>The client insisted on an actual tree for the landing page, and clickable circles as ‘fruit’ for each of the navigational choices.<p>But, yes, I remember doing this in the late 90s.<p>We still have animated GIFs, too.
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.
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.
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.<p>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?<p>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!<p>[1] - <a href="https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/" rel="nofollow">https://css-tricks.com/the-many-ways-to-link-up-shapes-and-i...</a><p>[1] Scrawl-canvas - <a href="https://scrawl-v8.rikweb.org.uk/" rel="nofollow">https://scrawl-v8.rikweb.org.uk/</a>
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.
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.<p>[1] <a href="https://css-tricks.com/lodge/svg/31-can-put-raster-images-svg/" rel="nofollow">https://css-tricks.com/lodge/svg/31-can-put-raster-images-sv...</a>
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.
> we'll be revisiting this opinion once responsive websites with their (gasp) automatically resizing images are out of fashion.<p>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.
On a side note, LINE Messaging API support sending image map message[0] where you can have multiple tappable areas.<p>[0] <a href="https://developers.line.biz/en/reference/messaging-api/#imagemap-message" rel="nofollow">https://developers.line.biz/en/reference/messaging-api/#imag...</a>
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.<p>Does anyone remember it? It was once featured on HN, but I can't find it now.
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.
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.
I'm now curious as to whether you could animate the image map along with what it displayed to make some sort of game.<p>With a JS animation library if the actual css properties aren't animatable
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
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 : <a href="https://imgur.com/rgHrsoa" rel="nofollow">https://imgur.com/rgHrsoa</a>
And that’s a bad idea.<p>HTML images maps are not responsive. Just use SVG, it works without any scripts and it resizes with the image.<p>If you use <foreignObject> you can also use a fully responsive <picture> tag