changing between normal and selected.

Ahmed562718

I have 2 imges one for normal and other for selected, each has 4 buttons, now the selected button shows only the a selected part from the selected.png, and the other 3 buttons show parts from the normal.png, how can i do this

Amy Dullard - MSFT

Are you asking about switching the backgroundImage of a button depending on whether or not it has focus

I would recommend taking a look at the "Buttons" sample that comes with the Microsoft HD DVD simulator. C:\Program Files\HD DVD Interactivity Jumpstart\Samples\Buttons

Peter Torr - MSFT

Or are you asking about cropping You would use a solution similar to the one Amy posted for changing the backgroundFrame, but you would use the style:crop attribute to only show the portion of the image that was needed for each button. For example, if you have an image that was 200px by 200px and was segmented into 4 quaters each of which was 100px x 100px, you could do something like:

<button style:width="100px" style:height="100px" style:backgroundImage="url('foo.png')" style:crop="0 0 100 100"/>

<button style:width="100px" style:height="100px" style:backgroundImage="url('foo.png')" style:crop="0 100 100 200"/>

<button style:width="100px" style:height="100px" style:backgroundImage="url('foo.png')" style:crop="100 0 200 100"/>

<button style:width="100px" style:height="100px" style:backgroundImage="url('foo.png')" style:crop="100 100 200 200"/>

Now each button references the same image, but only shows the section you want. Combine this with multiple backgroundImage values and a backgroundFrame animation and you should have a good solution.

Ahmed

Yes indeed I'm asking about the cropping, I'll be trying this solution.

thx alot