MyGUI use ButtonImage         Sample usage of the ButtonImage skin.

From the MyGUI Ogre forums, posted by my.name 2010 May 24.
Preserved here because dpaste is going to delete the sample code tomorrow (2010 June 22).

 Note
Button_ModeImage is optional. If set, the image will change when the button's state changes (mouse hover, pressed, disabled, etc). If not set, the image state does not track button state.
Layout Fragment
<Widget type="Button" skin="ButtonImage" position="10 280 98 18" layer="Back">
  <Property key="Button_ImageResource" value="pic_ButtonImage1"/>
  <Property key="Button_ModeImage" value="true"/>
</Widget>


These properties are supported by the MyGUI Layout Editor. The value of Button_ImageResource should match the name= attribute of the Resource element below. This layout fragment is incomplete. The snippet should be used somewhere within a complete layout.

ButtonImage.resource
<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="Resource">
  <Resource type="ResourceImageSet" name="pic_ButtonImage1">
    <Group name="States" texture="core.png" size="50 50">
      <Index name="disabled">
        <Frame point="0 203"/>
      </Index>
      <Index name="normal">
        <Frame point="50 203"/>
      </Index>
      <Index name="highlighted">
        <Frame point="100 203"/>
      </Index>
      <Index name="pushed">
        <Frame point="150 203"/>
      </Index>
    </Group>
  </Resource>
</MyGUI>


The resource file is complete and may be used as-is (though pointing at core.png isn't necessarily useful).

The Resource must be explicitly loaded:

Resource Load
MyGUI::ResourceManager::getInstance().load("ButtonImage.resource");


This HowTo also applies to ButtonImageText, with the addition that the property Widget_Caption is supported within the button layout.