If so, why just not use native desktop/mobile video editor app instead?
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.
Interesting. This order is commonly used by libraries like SDL and SFML to declare rectangular shapes.
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.
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.
rect: left, top, right, bottom
circle: cx,cy,r
poly: x1,y1,x2,y2,...
WinAPI is much older than 1995, these things were inherited from 16-bit Windows 3.x.
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.
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!
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.
https://www.versionmuseum.com/images/websites/microsoft-webs...
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.
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.
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.
I think you misspelled Macromedia. ;)
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/
Is it accessible-friendly?
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.
The weirdest: MIDI music on autoplay, VRML.
[1] https://css-tricks.com/lodge/svg/31-can-put-raster-images-sv...
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.
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.
[0] https://developers.line.biz/en/reference/messaging-api/#imag...
There are plenty gamified learning tutorials like https://cssgridgarden.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.
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.
PS. Get off my lawn.
Tables are not the correct markup for positioning various items here and there to create a layout on a page.
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?
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).
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.
Does anyone remember it? It was once featured on HN, but I can't find it now.
With a JS animation library if the actual css properties aren't animatable
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.
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
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
