Add <area> example

[2alin]

Fixes #758
This one, was full of fun 😁.
Because of the length taken by the coordinates of a polygon area, I decided to not put an alt property in the anchors (but I did in the image). If I need to specify that anyway, I could write alt="go to ..." and it will take at least 16 more characters of horizontal space, please let me know.

The whole graphic, was made from scratch by me in inkscape (I only took the dinosaur head from an external source), so there won't be any kind of copyright problem 😉.

[wbamberg]

This is really cool! Nice job :)

I think you do need alt, because it's mandated. I checked using the W3C validator, and it gave me the expected error:

I take your point about horizontal space though. What I do is use hard line breaks to make sure that the markup will be readable when the browser window is 1000px (preferably less, more like 900px). I've done this a lot with the input examples, which typically use lots of attributes (e.g. https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-password.html).

Then you get the other problem of course, which is lots of lines in the example. In this case I would probably suggest having fewer hotspots in the image. For example you could have just three - HTML, CSS, JS. Or maybe four, and you could put MDN in the middle, then you could demo circle as well as poly. I'm sorry to put you to the trouble of reworking the image though :(.

What do you think about having the links go somewhere, using something like:

<area shape="poly" coords="207,241,54,241,72,217,189,217"
      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">

[2alin]

@wbamberg I agree about the links going to real articles in MDN, that's what I thought in the beginning but the lines were too long and I went for dummy links instead. Now that you suggest about using hard coded break lines, I'll apply then all what you said.

And about changing the figure for one with less area objects, well it's a pity 'cause I kinda liked it. But user experience is first, and if we need to make it again, we just make it, no problem 😅. I'll probably work on it in two days, I'll be kinda busy tomorrow (it's already night at my place).

I'm thinking about using this kind of figure instead (see drawing attached please). If you find it suitable to use, I have two questions:

1. JS or JavaScript in the label's text?
2. is it alright (for demo purposes) if the polygon shape to use doesn't fit most of the area that corresponds in the figure? I would use an irregular polygon, maybe 5 points, covering the text area (css/html/js) and a little more, but it will cover at most 60-70% of each figure's region.

[2alin]

And because the example is for <area>, I'm trying to cover all three different shapes: circle, poly, and rect. But if it's too much, I can make the figure without the rectangle at the corner. What do you think is best?

[wbamberg]

Actually, thinking some more about this, I think you can keep the image and the example won't be too long. Let's say you split each area element across three lines, like:

    <area shape="circle" coords="130,136,60"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="some alt text" />

...then I think the example would be about 25 lines long, which is fine.

One thing I missed before: even when you don't need it we are preferring to use /> to close th element, so:

<area some stuff />

not:

<area some stuff >

[2alin]

Done!
Could you review it again? please. Code ended up quite dense, mainly because of coords and href values, but as you said, it's only 24 lines 😁.

[wbamberg]

eek! I wondered what had happened to it! :-)

[2alin]

sorry!! I was trying to push delete another branch from terminal, and I mistakenly deleted this one 😅, but I think all is back to normal now.

[wbamberg]

This is a really nice example. Thanks for taking the time on it :).

[2alin]

thank to you for reviewing it and all the corrections you pointed out :)