i need someone Explain me how coords code works

RectangleThis expects four coordinates. The horizontal position of the top-left corner, the vertical position (from the top of the image) of the top-left corner, the horizontal position of the bottom-right corner and the vertical position of the bottom-right corner. An example would be:

Code:

shape="rect" coords="10,20,75,40"

CircleThis expects three coordinates. The horizontal position of the centre, the vertical position of the centre and the radius of the circle (percentage radii are taken as a percentage of the shorter side of the image). An example would be:

Code:

shape="circle" coords="50,80,20"

PolygonThis expects as many pairs of coordinates as you need to make your polygon. These can make any polygon shapes you need, and can have sloping lines. All coordinates are specified as horizontal position then vertical position, with all of them in a long comma separated list. The last pair of coordinates can optionally match the first. An example would be:

Code:

shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310"

If any of these areas overlap, the one that is defined first will be used in the places where they overlap. There is also a "default" shape, which covers the entire image, and does not need the coords attribute. However, I advise you not to use this shape, as it makes it impossible for a user to know when they are over a proper area, since the mouse cursor will always show as an area link.
It is possible to use an AREA to puch a hole out of another one. Instead of giving it an HREF attribute, set the NOHREF attribute (without giving it a value). Then make sure that it appears before the other area in the source code, and it will be placed on top of it, as a dead space where the other area will not react.
Remember that every area must have an ALT attribute giving the alternative text to display. For areas with no HREF, it is best to provide an empty ALT attribute. If you use A elements instead, these cannot have an ALT attribute, but browsers can use their contents instead. I also recommend giving every area a TITLE attribute, that most browsers will display as a tooltip when hovering the area. This makes it much more easy to see what the area represents.