This example uses the BUTTONGROUP element for the coding in the skin definition file. BUTTONGROUP creates an easy way to process mouse events without having to calculate exact locations on the screen and uses color instead of x and y-coordinates.
First you must add the BUTTONGROUP tags to the skin definition file you created. Put them after the THEME tag attributes.
<BUTTONGROUP mappingImage = "map.bmp" hoverImage = "hover.bmp"> </BUTTONGROUP>
Leave a few blank lines above the closing BUTTONGROUP tag for the buttons you will add next.
The following attributes are used to define BUTTONGROUP:
This is the file name of the mapping art file you created before, the one with the red and green circles. This attribute is required for any BUTTONGROUP.
This is the file name of the hover art file you created before, the one with the two yellow buttons that read "Play" and "Close". This is not required, but a hover image helps to provide feedback to the user.