How to implement various shape value in <area> ?

I am trying to implement area element; shape value is circle.

<area accessKey="U+0031" id="p1.png" coords="(100, 100, 7)" shape="circle" state:enabled="true" style:backgroundImage="url('P1.PNG')" state:focused="false" state:actioned="true" state:pointer="true" state:value="false" style:border="2px solid #000000"/>

But this is not working for any shape value except for default.
Please suggest the reason for the same.

Answer this question

How to implement various shape value in <area> ?

Alex-MyRpg
Thanks Peter.
RajMohapatra

The coords parameter is space-delimited:

coords="100 100 7"

Also the id should not have a period in it

id="p1"

Many of the other attributes are superfluous as well (eg, you can't set state:pointer through markup; that is set automatically only when the mouse is over it).

Note that although the area will be a circle, if you give it a background colour it will apply to the box surrounding the circle (ie, it will look like a square).
How to implement various shape value in <area> ?

Answer this question