Nifty Buttons with icons

I am trying to implement a button with icon on it. Currently my button control is something like this



[java]

<control name="button" label="CLICK ME" id="click01" paddingTop="4px" align="center" valign="bottom">

<interact onClick="click()"/>

</control>

[/java]



how can I replace the button text CLICK ME with an image?

a nifty button consists of a panel and a text label on top. Either create your own “image button” control like the nifty button, or just create an image, set visibleToMouse=“true” and you can click it

1 Like

Nifty’s manual sucks :S where can I find how to create a nifty image?

nifty manual

I tried [java]<!-- example imageSelect (right out of the multiplayer example which is part of the nifty-examples project) -->

<control id="#imageSelect" name="imageSelect" width="126px" imageWidth="80px" imageHeight="80px" imageList="multiplayer/avatar1.png,multiplayer/avatar2.png,multiplayer/avatar3.png,multiplayer/avatar4.png" />[/java]



but the image gets distorted



edit:



its more like something is added to its sides rather than distorted

never used that, but it has a width of 126px and imageWidth of 80px :o looks like its gonna be filled/spaced with something.



Read the nifty manual on images… theres much easier ways to do it, including an image tag!!

1 Like

Perhaps not use a button, something along the lines (sudo code)…



[xml]<image filename=“name.png”>

<interact onClick=“click()” />

</image>[/xml]



…may help.



If for whatever reason it MUST be a Nifty Control Button (but it doesn’t sound like it), then perhaps give it a new style, then define a “backgroundImage” on the #panel for your new style (this is what I might try, however I would advices a strong working knowledge of Nifty is required before trying this kind of thing).



“Distorted” resized images can often be address with “imageMode”.



And like @wezrule said, check the manual, I find I have it open every day I’m working on anything GUI, and I have a decent wack of Nifty under my belt (… that’s right ladies :wink: ).



Good Luck!

2 Likes

thanks guys it worked