[css-ui-3] should there be a note pointing to HTML's definition of cursor applying to image maps?

[dbaron]

It might be a good idea for the definition of cursor to have an informative note that links to the part of HTML that specifies how cursor works on image maps.

[frivoal]

Thanks, that seem like a good thing to do. Can we add this to level 3 without disturbing the likely transition of the spec to PR soon, as notes are editorial? If yes, I am happy to do so. If no, I'd rather have it go in level 4.

[css-meeting-bot]

The CSS Working Group just discussed Cursor and image maps, and agreed to the following resolutions:

• RESOLVED: Add informative note that links to the part of HTML that specifies how cursor works on image maps.

The full IRC log of that discussion

<eae> Topic: Cursor and image maps
<tantek> s/in the PR to CR/in the CR to PR
<eae> github: https://github.com//issues/1618
<fantasai> So the resolution was that the event is dispatched as if text-ellipsis was none
<eae> Florian: As a note, this is not in our spec, HTML is weird when it comes to image maps.
<fantasai> (fantasai asked for clarification on what the resolution meant)
<eae> Florian: The cursot that you are supposed to use over an area in an image map depends on the area element and not the image you are hovering.
<eae> Florian: The only property that is affected by area is the cursor.
<eae> tantek: I agree
<eae> Rossen: Other opinions?
<tantek> yes, add the informative note
<eae> PROPOSED RESOLUTION: Add informative note that links to the part of HTML that specifies how cursor works on image maps.
<tantek> q?
<eae> Rossen: Any objections?
<Rossen> q?
<eae> RESOLVED: Add informative note that links to the part of HTML that specifies how cursor works on image maps.

[tomhodgins]

So what I noticed about the area element and image maps was that they're all based on pixels for their coordinates. Because of this, it's really tough to scale or resize an image map and still have the coordinates line up - but I found a way to do it!

If you have an HTML element with a set width and height (like an image + map combo) and you wrap that in a wrapper element you can use transform: scale(); to resize the image and map while respecting their pixel-based coordinates!

It requires knowledge of the current offsetWidth of the wrapper element, then you're able to determine the correct scale() by dividing the current width of the wrapper by the original width of the thing you're scaling.

Here's a blog post about the technique, with a video and code examples: https://codepen.io/tomhodgins/post/how-to-make-any-html-element-scalable

And here's the technique implemented 4 different ways: https://codepen.io/tomhodgins/pen/wqBYLb

[frivoal]

@tomhodgins While your observations about image maps are interesting, they don't seem be specific to the cursor CSS property, which is what we're discussing here. If you wish to five feedback about how image maps work, the whatwg's github is a better place.