Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

It's 2020 and I'm using image maps

videoinu.com

Post reply on HN
Print view View original

31–40 of 109 posts

Re: It's 2020 and I'm using image maps

#31

Post by perardi »

ksec wrote: post #12
skocznymroczny wrote: post #5

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

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.

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

Re: It's 2020 and I'm using image maps

#32

Post by kevsim »

perilunar wrote: post #17
kevsim wrote: post #3

I feel like I'm missing something. It seems like declare a element, associate it with an , but then use JS to iterate over the map and build a bunch of absolutely positioned 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 elements? Wouldn't that avoid the fighting with funky coordinate systems, etc.? I get wh…

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.

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

Re: It's 2020 and I'm using image maps

#33

Post by lallysingh »

Pmop wrote: post #4

> 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 librar…

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.

Re: It's 2020 and I'm using image maps

#34

Post by danellis »

perilunar wrote: post #20
Pmop wrote: post #4

> 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 librar…

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

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.

Re: It's 2020 and I'm using image maps

#35

Post by danellis »

Pmop wrote: post #4

> 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 librar…

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.

Re: It's 2020 and I'm using image maps

#36

Post by hawski »

Pmop wrote: post #4

> 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 librar…

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

Re: It's 2020 and I'm using image maps

#37

Post by Intermernet »

ksec wrote: post #12
skocznymroczny wrote: post #5

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

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.

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.

Re: It's 2020 and I'm using image maps

#38

Post by Sharlin »

kevsim wrote: post #32
perilunar wrote: post #17

Earlier quoted context omitted.

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.

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

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.

Re: It's 2020 and I'm using image maps

#39

Post by 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.

Re: It's 2020 and I'm using image maps

#40

Post by 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.

Post reply on HN