
It's 2020 and I'm using image maps - sunnylemon
https://videoinu.com/blog/image-maps-in-2020/
======
Acconut
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
> _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
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
> _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"?

~~~
phailhaus
Modern browsers are pretty secure nowadays. By comparison, you have pretty
much zero guarantees about an app you install onto your computer. The only
concern is that these browser apps are quietly sending your files elsewhere,
but this is easily inspectable via the dev tools.

~~~
Reelin
To be fair, modern OSes are quickly catching up in this regard. WASM is also
increasingly available for use as a native sandbox. Examples:
([https://github.com/WAVM/WAVM](https://github.com/WAVM/WAVM))
([https://github.com/bytecodealliance/lucet](https://github.com/bytecodealliance/lucet))

~~~
StillBored
Or you just run the installer in a sandbox/container, as has been possible for
at least a decade in all major OSs

Sandboxee was released in 2004, and there have been various bits of registry
journaing/snapshot software since the late 1990's which combined with NT ACLs
could provide at least as much security as your getting out of a browser
sandbox.

Browsers have an absolutely huge sandbox surface and lack even the most basic
of fine-grained security controls out of the box. Enabling even basic
restrictions to avoid fingerprinting has turned out to be difficult. How you
do you know (particularly with firefox) that one tab isn't actively picking
out data from another tab open to your banking site. Much less the problem
with malicious javascript being injected via the ad frameworks.

Browser security is pretty much a joke.

~~~
phailhaus
> Or you just run the installer in a sandbox/container, as has been possible
> for at least a decade in all major OSs

The level of technical know-how necessary to accomplish that is astronomical
compared to "here's a link," especially since it's cross-platform out of the
box. That's why it's a no-brainer: any sane person is going to prefer that
over installing untrusted software. Basically zero users know about the
sandboxing solutions available for their system, much less willing put in the
effort to Do It Right.

------
Pmop
> 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.

~~~
jcfields
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
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?

~~~
toast0
This is pretty much it. Scan lines are numbered from the top down, as they
happen, everything else is numbered accordingly.

The real question is why scan top down and not bottom up? (I don't have any
idea). Horizontal scan lines makes sense given a wider than tall screen,
because it results in fewer scan lines, lowering the frequencies required ( a
bit). Wider than tall makes sense for TV given common movie film aspect ratios
and computer monitors started as TVs with different control circuits and
cases.

------
at_a_remove
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
the modern web just doesn’t do that, though. I don’t think I’ve seen a
clickable polygon in the last 15 years

~~~
reaperducer
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.

------
kevsim
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
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
Right, but in this example, the author is laying divs on top of the map areas,
and those need to be rectangles.

~~~
Sharlin
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.

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

[https://www.versionmuseum.com/images/websites/microsoft-
webs...](https://www.versionmuseum.com/images/websites/microsoft-
website/microsoft-website%5E1994%5Ehomepage.gif)

~~~
dpcan
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
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.

~~~
52-6F-62
You still can go the route of not knowing a ton of tech to get a site up and
running while still having full agency over the HTML/etc. Just pick up a
service like bluehost shared. Hell, at work we even have one for odd tasks and
easily-accessible FTP needs and one-off sites or documentation pages.

I do remember getting to play with Dreamweaver back then, though. It felt so
high tech compared to Notepad and FrontPage Express and all that. All the
"cool" sites had image maps and as a kid it was tough to understand how they
worked. I did something similar to you, but usually copy and pasted from a web
site then changed the image out and kept tweaking by trial-and-error until I
got the result I wanted.

Nostalgia is a strong drug haha

------
dillonmckay
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.

------
prakhunov
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
Adobe Fireworks was great for that.

~~~
reaperducer
_Adobe_

I think you misspelled Macromedia. ;)

------
Minor49er
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.

------
rikroots
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...](https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-
with-html-and-css/)

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

~~~
52-6F-62
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
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.

------
jtwaleson
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.

------
29athrowaway
90s starter pack: Framesets, image maps, marquees, blink, guestbooks, visit
counters, "under construction", "webmaster", tiled backgrounds.

The weirdest: MIDI music on autoplay, VRML.

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

~~~
29athrowaway
Download managers, ICQ.

------
tyingq
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...](https://css-tricks.com/lodge/svg/31-can-put-raster-images-svg/)

------
bryanrasmussen
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
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
Aaaaand it's 1996 again!

~~~
dependsontheq
No in 1996 we did everything with frames, I once worked with a team that
designed a website consisting of 200 frames.

~~~
pzmarzly
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.

------
michaelmior
> 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.

------
max23_
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...](https://developers.line.biz/en/reference/messaging-
api/#imagemap-message)

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

~~~
ksec
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.

~~~
Intermernet
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.

~~~
efreak
My dad's employer didn't remove the Java applets from their website until I
pointed out that navigation had been broken due to both Firefox and chrome
having removed Java support. Until then, the menu showed pixelated hyperlink-
blue text that changed color with a transition when hovered or clicked, and
couldn't be used with the keyboard. Each link in the menu was a Java applet to
take you to the next page.

~~~
Intermernet
That's beautifully terrible :-)

------
hawski
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
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
Thanks, that's it!

------
fny
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.

------
dmitryminkovsky
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.

------
wilsonrocks
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

------
meerita
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

------
egfx
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
<blink> and <marquee> can be pretty much replicated with CSS animations —
there's no need for the tags anymore.

~~~
egfx
You have to jump through a lot of hoops to replicate blink in css.
[https://stackoverflow.com/questions/13955163/imitating-a-
bli...](https://stackoverflow.com/questions/13955163/imitating-a-blink-tag-
with-css3-animations)

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

~~~
ooobit2
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.

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

------
turnipla
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
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

