It's 2020 and I'm using image maps

https://videoinu.com/blog/image-maps-in-2020/

by sunnylemon • 6 years ago

213 106 6 years ago

egfx2• 6 years 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

perilunar3• 6 years ago

<blink> and <marquee> can be pretty much replicated with CSS animations — there's no need for the tags anymore.

egfx2• 6 years ago

You have to jump through a lot of hoops to replicate blink in css. https://stackoverflow.com/questions/13955163/imitating-a-bli...

kevsim2• 6 years 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!

perilunar3• 6 years 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.

kevsim2• 6 years ago

Right, but in this example, the author is laying divs on top of the map areas, and those need to be rectangles.

Pmop• 6 years 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.

perilunar3• 6 years 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,...

danellis2• 6 years 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.

Const-me• 6 years ago

Same in WinAPI, note the order of fields: 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• 6 years 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.

LoSboccacc• 6 years ago

something I always wondered since the age of programming mode 13h, is the use of the fourth quadrant so that loop would fill video memory in the order the scan line goes reading it?

lallysingh• 6 years ago

Almost everyone uses them like that. It's the index of the right point in the graphics buffer when treating it as a 2D array.

bonestamp22• 6 years ago

Back when image maps were common on websites, it was also easy to find the coordinates in your image by placing your Paint Shop Pro crosshairs at the desired points in your image and then transposing those coordinates to the html. Using a relative number for the second point would have added a lot of work for complex image maps. Maybe that's just a coincidence because it was actually driven by the underlying array, but it was super helpful on the design side too.

PS - This brings back my memory of server side image maps which were fun for treasure hunt type images because you couldn't view the page source to figure out where the hotspots in the image were. Good times.

danellis2• 6 years 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.

hawski3• 6 years ago

English is written left to right and top to bottom. Text mode terminal is addressed this way.

retox• 6 years ago

Interesting to perhaps no one else but those others that have suffered with it, the PDF specification allows drawing rectangles and other in-line graphical elements inside a 'sort of' canvas from a bottom right co-ordinate space only. I wondered for a while why that was.

andreareina• 6 years ago

Do you mean the bottom left corner? That's what ReportLab (python PDF authoring package) uses. It kinda makes sense wrt the cartesian coordinate system where x coordinate increases to the right and the y coordinate increases upwards, thus the origin is at the bottom left. But yeah, from a UX perspective it's one of those cases where practicality would have been better than purity.

skocznymroczny• 6 years ago

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

qubex• 6 years 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• 6 years 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/

acomjean• 6 years ago

And the flex box game.

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• 6 years 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• 6 years 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.

vbezhenar• 6 years ago

One reason might be semantic markup. But with CSS display: table and related properties that's not really a problem.

mcntsh• 6 years ago

Tables are overly verbose and have stylistic limitations. There's just a better tool for the job, and 9 times out of 10 it's going to be flexbox.

perardi• 6 years ago

1. Less markup. It's way easier to have a unordered list and use flex or grid to get the layout in place. No giant soup of nested table tags.

2. How do you deal with responsiveness? A pretty typical pattern would be "have this set of elements horizontal on large viewports, then have it vertical on small viewports". Trivially easy with flexbox (just set flex-direction at a media query breakpoint) or grid (change the number of columns).

Intermernet2• 6 years ago

Bah! Every table cell should be a separate HTML file in a frameset. All clicks should be handled by a hidden frame and AJAX is a floor cleaner.

PS. Get off my lawn.

themarkn• 6 years ago

Tables are perfect for tabular data. They are the correct markup and should be used for that (so not avoided at all cost).

Tables are not the correct markup for positioning various items here and there to create a layout on a page.

anentropic• 6 years ago

Tables used to sucks in IE era.

No, that wasn't it. They didn't suck, and for a bunch of years IE was the best browser.

In the past there were no other options (no CSS positioning etc) so people used tables as a way to control content layout. They were actually pretty good for this, even though that's not what they were intended for.

Then CSS came along. Initially CSS was mostly exciting because it exposed a lot more fine-grained control over display properties like fonts, borders, margins etc than had been available in HTML attributes.

Gradually developers came to appreciate the value of what CSS was intended for - separation of content and presentation. Along with that realisation came the push for "semantic" markup, i.e. use appropriate HTML tags for the content, and stop using tables for layout (unless you are marking up actual tabular data).

For some years this was awkward though because CSS didn't provide good layout tools. So instead of true semantic markup you often ended up with "div soup" - lots of anonymous tags which exist just as containers for sake of achieving some hack with the CSS positioning system. And still a couple of things that had been simple to achieve with tables remained impossible.

But people persevered with the CSS hacks, for all the right reasons, until we get to the present day when I guess modern CSS has all the tools needed to produce any kind of layout, layouts that adapt to screen size, units that cope with Hi-DPI etc etc etc

But I think it's still appropriate to mark up tabular data in HTML with a table, and I would think they do a good job of that?

spcebar• 6 years ago

Rendering issued aside, it's a good idea to use tables for what their designed for: displaying data. Using elements how they're specc'ed to be used makes the web a lot friendlier to screen readers and friendly neighborhood spider bots.

bryanrasmussen• 6 years 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• 6 years 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• 6 years ago

Aaaaand it's 1996 again!

kpozin• 6 years 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.

meerita• 6 years 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• 6 years 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• 6 years ago

The author seems to be have written this post based on work for an in-browser video 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!

app4soft5• 6 years 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• 6 years 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.

bonestamp22• 6 years ago

It's true, a proper desktop editing application would probably be better in most cases, but I guess it would still be useful for the case where your computer can't run desktop applications (ex. chromebooks) or your administrator doesn't give you permission to install such applications.

CyberDildonics2• 6 years ago

This would be accessible anywhere on any computer hooked up to the internet, even potentially a phone, tablet, raspberry pi, your grandma's computer, etc.

Many programs that don't need low level access like spreadsheets, pdf readers, word processors, image editors, etc.could be made into single page html files that would both be sandboxed and cross platform.

turnipla2• 6 years 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

turnipla2• 6 years 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• 6 years 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_• 6 years 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/#imag...

rikroots2• 6 years 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-i...

[1] Scrawl-canvas - https://scrawl-v8.rikweb.org.uk/

52-6F-622• 6 years 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?

rikroots2• 6 years 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• 6 years ago

Don't CSS transforms work on image maps? I bet you could do some media query magic + scale() to make it work.

hawski3• 6 years 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• 6 years ago

Could be this: https://www.webbloatscore.com/

https://news.ycombinator.com/item?id=12783898

hawski3• 6 years ago

Thanks, that's it!

dillonmckay• 6 years 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• 6 years ago

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

ooobit2• 6 years 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• 6 years 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-sv...

michaelmior• 6 years 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• 6 years ago

I'm reminded of the first image map I ever saw -- Microsoft's 1994 homepage:

https://www.versionmuseum.com/images/websites/microsoft-webs...

dpcan• 6 years 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• 6 years 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• 6 years 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• 6 years ago

Adobe Fireworks was great for that.

reaperducer2• 6 years ago

Adobe

I think you misspelled Macromedia. ;)

at_a_remove• 6 years 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• 6 years 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• 6 years ago

Arbitrary polygons are, after all, not that easy to click in general.

gwright• 6 years ago

the most obvious modern use case that comes to mind is maps or more generally geospatial visualization tools

adrianmonk• 6 years ago

My city's COVID-19 map breaks it down by clickable zip code regions.

reaperducer2• 6 years 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• 6 years 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.

29athrowaway2• 6 years 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• 6 years ago

Java Applets, Dynamic HTML, Perl/CGI, executable email attachments, MSIE vs Netscape

29athrowaway2• 6 years ago

Download managers, ICQ.

fny• 6 years 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.

Minor49er• 6 years 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• 6 years 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• 6 years ago

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

It's 2020 and I'm using image maps

Related Stories