Rotate Button (Or maybe use an image inside button?)

In the sake of a good user inteface,
I'm trying to make this: http://farm5.static.flickr.com/4071/5154426822_93ffd02f55_o.jpg
look like this: http://farm2.static.flickr.com/1114/5153818257_cf7bd3cee0_o.jpg
h3. Two ways I can think of:
* rotate the button component - I have no idea on how to do that. If anyone can give me an example i'll aprreciate it.. (I know JSF, myfaces and richfaces. Not much about javascript)
* put an image on the button. (Can you actually put an image on a command button?)
Any other suggestions would also be great.
Tnx!

user8863870 wrote:
In the sake of a good user inteface,
I'm trying to make this: http://farm5.static.flickr.com/4071/5154426822_93ffd02f55_o.jpg
look like this: http://farm2.static.flickr.com/1114/5153818257_cf7bd3cee0_o.jpg
h3. Two ways I can think of:
* rotate the button component - I have no idea on how to do that. Who says that it is possible? It is possible with a client side embedded framework like Flash, Silverlight or JavaFX. But certainly not with vanilla javascript/css/html.
* put an image on the button. (Can you actually put an image on a command button?)You can put an image on a commandLink. But that image will be square and contain lots of empty space that will still be clickable.
>
Any other suggestions would also be great.
Tnx!You could get somewhere with a HTML image map, but I have no experience trying to make that work with JSF. I haven't seen a component yet that links image map functionality to a JSF component. Is it an option to work with a regular link in stead of a commandButton/commandLink?

Similar Messages

How to use an image as button?

I want to set an image as the background of a frame, and also want use four regions of the image as four buttons. How?

How about an image on the JFrame with four JButtons with some type of image (even if you copy a piece of you original image to place on the button)? I played around with this and its kind of neat. Easier from a gui perspective to see buttons than flat regions -
Have fun
//in a class that extends JFrame, create the image panel and add buttons with icons to it...
Container contentPane = getContentPane();
ImagePanel imagePanel = new ImagePanel(); //see below
contentPane.add(imagePanel);
JButton button = new JButton();
button.setIcon(new ImageIcon(WorldMap.class.getResource("someGIF.gif"))); //or other form of getting and setting an icon
button.setSize(65,45);
mcsButton.setLocation(405,175);
mcsButton.setContentAreaFilled(false); //important so the button looks like a raised part of the picture...not a grey box with an icon.
mcsButton.addMouseListener(new MouseAdapter()
public void mouseClicked(MouseEvent e)
//do something
imagePanel.setLayout(null);
imagePanel.add(mcsButton,null);
//code to put an image on a JPanel I received from this forum
class ImagePanel extends JPanel
private Image image;
public ImagePanel()
image = Toolkit.getDefaultToolkit().getImage("C:/WholeWorldViewJPG.jpg");
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(image, 0);
try
tracker.waitForID(0);
catch (InterruptedException e)
public void paintComponent(Graphics g)
super.paintComponent(g);
Dimension d = getSize();
int clientWidth = d.width;
int clientHeight = d.height;
int imageWidth = image.getWidth(this);
int imageHeight = image.getHeight(this);
g.drawImage(image, 0, 0, this);
for (int i = 0; i * imageWidth <= clientWidth; i++)
for (int j = 0; j * imageHeight <= clientHeight; j++)
if (i + j > 0)
g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight);
}

Use sprite image for button icons

Hi all,
I'm developing a mobile app in sapui5, i have many buttons in that.
I also have a sprote image which contains all the icons.
Please help me to use the sprite image as icons to the button.
Thanks,
Rahul.

sorry the sprote implies sprite
sprote ~ sprite

Image on Button

I am creating a Free-Standing Application using FRAME. As I want to improve the friendiness of my button, instead of using text over the button, I intend to use some picture image.
I have been trying hard to work the code out but to no avail. May I enquire if you have any sample code that has the above requirement for me to analysis?

Well first of all if it's an option at all i'd use swing... the code for this is simple:
JButton = new JButton(new ImageIcon("pathname");As far as awt goes, i'm not sure but i believe that you may need to extend the button class and override the Paint(Graphics g) method.
hope this helped
webaf409java

Problems putting Images inside large buttons

The problem below is using the Fireworks program to create a
Button with an Image inside.
Ok I have created a generic button , This button is not a
fireworks button it was made from scratch, the size is roughly
90x90 , what I want to do is place and Image inside this button and
then to be able to move the image into the correct place, If I
paste the image into the button it simply places the image where it
wants I cannot move the image , I tried creating a Layer and Frame
and using the marque tool but it pastes the image top left hand
corner and the image cannot be moved.
Where am I going wrong.?.
SPECCY.

do this in an image editor. It would be much simpler/easier
and more
reliable that using html.
If you still want to do it in html, put the button image as a
background.
> Where am I going wrong.?.

How to use icon instead of bitmap for image on button in toolbar?

Hello,
I am trying to use an image that has a transparent background on one of the buttons on our custom toolbar in Adobe Acrobat.
In the past we have been using the following code with Bitmaps to display the image and it has worked perfectly:
======================================================================
AVIcon icon = LoadBitmap(gHINSTANCE, MAKEINTRESOURCE(IDB_OPTIONS_LARGE));
toolButton = AVToolButtonNew(ASAtomFromString("IMGR:Options"), icon, true, false);
====================================================================
Background info on the other objects:
V0200_DATA* dataPtr = (V0200_DATA*) windowsData;
gHINSTANCE = dataPtr->hInstance;
Resource File:
IDB__OPTIONS_LARGE BITMAP "Resources\\ImageOptions_Large.bmp"
IDI_ICON1 ICON "Resources\\Image_Icon.ico"
Unfortunately, these bitmaps are not transparent and end up showing the white background instead of the transparent one.
I have tried using Icons and PNGs as my image but I have been unable to get anything to show up. Here is the code I am using to get the AVIcon:
===================================================================
AVIcon icon = LoadImage(gHINSTANCE, MAKEINTRESOURCE(IDI_ICON1), IMAGE_ICON, 0, 0, LR_DEFAULTSIZE);
===================================================================
However, no image appears on the toolbar. I am able to use LoadImage with the bitmap, but I am unable to make it transparent, even when using the LR_LOADTRANSPARENT flag.
If anyone can point me in the right direction I would greatly appreciate it!
Thanks,
Ryan

I got it worked with PNG file. I got transparent backgrounds in toolbar and menus.
below is my code,
HRSRC resource = FindResource(gHINSTANCE, MAKEINTRESOURCE(IDB_SAVE_21_PNG), L"PNG");
if( resource == NULL )
//Unable to load resource
DWORD resourceSize = SizeofResource(gHINSTANCE, resource);
HGLOBAL glob = LoadResource(gHINSTANCE, resource);
LPVOID resouceArray = LockResource(glob);
ASUns8 *data = (ASUns8*)ASmalloc(resourceSize + 1);
memcpy(data, resouceArray, resourceSize);
AVIconDataRec iconData;
iconData.dataStm = ASMemStmRdOpen(( char *)data, resourceSize);
iconData.eColorFormat = kAVIconColor;
void * iconBundle = AVAppCreateIconBundle6(kAVIconPNG, &iconData, 1);
AVToolButtonNew (ASAtomFromString("PFXDOC:Pfx_DocumentToolSave"),
iconBundle, true, false);
Thanks & Regards
Prakash

I have installed a trial of Adobe illustrator on my macbook pro. I want to trace an image using the custom trace button but can't. Does anyone have any ideas how I could custom trace?

I have installed a trial of Adobe illustrator on my macbook pro. It is the 2014 release of adobe illustrator. I want to trace an image using the custom trace button.
I start a new document. Then I place my scanned pencil/colored pencil drawing, in to the document. I have tried scanning and then placing it as a jpeg, bitmap, and tiff file. I have tried scanning and then placing it, in color and in black and white. The scan mode I use is flatbed. Adobe illustrator allows me to select the default button and one of eleven preset buttons (e.g high fidelity photo), but it does not allow me to click the custom trace button. The custom trace button is grey while all the other buttons are white.
Does anyone have any ideas how I could custom trace?

It seems pointless to adjust it afterwards because it is then only a couple a pencil lines rather then a full drawing. And how do I adjust it afterwards? Would I do this using the different buttons under the window button?

HTML Button use an image instead of Text

I have an HTML button in its own region called A_BUTTON, its current Button display attributes are
sytle: HTML Button
Attributes: name="A" class="where_clause_button"
what it does is i use a dynamic action based off the where_clause_button jquery selector and use javascript to update a hidden field. I would now like to use the Oracle Logo for example as the image of the button instead of using a text label for it. I tried adding to the Attributes src="http://www.oracleimg.com/admin/images/ocom/hp/oralogo_small.gif". When i run it the button still works the same as before but without the image and retains its Text Label, in this case its A.
the html it generates is for the button during runtime is:
<input type="button" src="http://www.oracleimg.com/admin/images/ocom/hp/oralogo_small.gif" class="where_clause_button" name="A" onclick="apex.submit('');" id="A_BUTTON" value="A">
How do i retain the functionality of this button but make it an image button?
Edited by: Brobot on Feb 9, 2011 5:22 PM

<li>Use a template based button and customize the template with the image.
<li>Add appropriate JS code to the URL section(prefixing with "javascript:" ) and optionally add a some ID attribute for easy JS access.

How can I use an image as a button and make it invisible unless selected?

Hello,
I have been trying to use this button I created in Photoshop in Encore but I cannot get it to work the way it should. First I import the image and drag it onto my menu. Then I select "Object" then "Covert to button". That creates a button but I want it to be invisible unless I select it. Creating a button this way only overlays colors on top of the image when selected vs not selected.
What I need is to have the image been a subpicture highlight. I tried to use Photoshop to create a layer under my buttons and use the image there, typing (=2) as the layer name. I think this is supposed to show the button in its selected state?
But that doesn't work. The image is invisible when I open the menu in Encore, not matter what I select for button highlights.
Could you please explain how to create an invisible button but use an image as its selected state and possibly another for its activated state?
Thanks.

Have you tried using the selections in the Encore menu viewer that show you selected and activated states?

How to Use an Image to Customize the Static Button Widget

Can I just get someone to help me figure out how to use an image to customize the static button widget, please?
I have tried using several different types of images, but none of them seem to actually change the appearance of the button.
Thanks!
Laura
Captivate 5.5

I tried to use the tools within the widget itself - it offers you the opportunity to use an image (see screenshot below).
I also opened it in Flash and tried to replace the images for one of the button styles there w/ my own, but in re-publishing the SWF from there I broke the widget. When I attempted to use the edited widget, there were no customization controls available after I inserted it (see screenshot two below).

Does anyone have the code to use an image button as the reset button?

Does anyone have the code to use an image button as the reset button? I'm finally at the end of the form and got the submit button to work as an image button, but cannot do the same with the reset button. Any help is greatly appreciated!

I agree.
http://www.456bereastreet.com/archive/200909/almost_never_add_a_reset_button_to_a_form/
Nancy O.

Can you use an image button to load a CFWINDOW?

Is it possible to use an image to open a cfwindow instead of
a regular button input type?

All I had to do was to use a regular link instead of using
the input tag. This is because the OnClick event can be used in a
input that has a type of button and on regular "<a href..."
links. However, you cannot use the onClick when you have an input
type of image.

Using area of image as button (active area)

Hello
I have image (jpg) that is displayed in applet and I'd like to change portion of it into let's say button. I would see image as I did before but when I move mouse over this button area something would happen (listener).
Can I do it?. If yes, can this button have any shape I want?.
Cheers

yes and yes.
the easy way is this:
put the image in one component, and put the button over top of it. there are a couple ways to do this:
subclass JPanel or JComponent (different people have different preferences here) and override the paint component method to paint the image.
THEN, Override either abstract button or JButton (again, different camps think differently here), and override the paint method (not the paint component method) to do absolutely NOTHING.
add your new button to the panel/component and voila. You have an invisible button overtop of your image (note, the visible property of the button will need to be true for it to respond, but you can choose not to paint the button, even if visible is true).
if you want to use any shape, you must also override the contains method of the button. I find the easiest way to do this is to create a java.awt.Shape or java.awt.Area object, and use the default implemnetation of contains of those objects.
Another solution, rather than painting the image in a JPanel or JComopnent, use the image as the icon of a JLabel, and put both the label and button in the same container, using either a null layout, and set the bounds yourself, or using a layout manager like stack layout which places all components in the same position, with a Z-ordering.
- Adam

Spry menus - using images for buttons

A search of the forums shows two approaches, to use an image
for a button in a Spry menu.
One of them uses HTML to put an <img> into the
<li>. Here is the example I found cited [contributed by
arandlett - though said there not to work in IE7].
<ul class="MenuBarVertical" id="MenuBar1">
<li><img src="images/bullet.png" align="left"
/><a class="MenuBarItemSubmenu"
href="index.htm">home</a></li>
<li><img src="images/bullet.png" align="left"
/><a href="#">About</a> </li>
</ul>
The other advises "find "background-color" and change it to
"background-image: url(link/to/image)" " [contributed by The only
RaM].
Underlying of course, is the question, how does the HTML
interplay (or not!) with the Spry javascript?
By this time, there must be pretty wide experience. After
all, putting interesting buttons in the popups/dropdowns is in many
ways what this is about.
We would be quite appreciative to learn what experience
indicates, now, is best practice. Or, does it depend, on ... ?
Thanks in advance for your help, David Allen

Let me add a note to my own post.
We would still be delighted to hear others' experience, with
images in Spry menus. One thing does emerge with a little further
look: The Spry menu is suited to using the _same_ image for each
button. If the desire is to vary that image (such as to use an
unusual font, so that the text changes on each image), then
Fireworks clearly is the tool of choice.
Again, we would be pleased to hear other experiences, David
Allen

Images inside of buttons

I know that I can put a small image in a JButton with: new ImageIcon("imageName.fig"), but is there a way to put an entire image inside a button. I want an image that I have to be a button and the button to be formed to the size of that image. Is this possible?

This should work. You'll need an image called test.jpg.
import java.awt.*;
import javax.swing.*;
public class TestApp extends JFrame
     public static void main(String[] args)
          new TestApp().setVisible(true);
     private TestApp()
          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          ImageIcon im = new ImageIcon("test.jpg");
          JButton b = new JButton(im);
          getContentPane().add(b);
          pack();
}

Rotate Button (Or maybe use an image inside button?)

Similar Messages

Maybe you are looking for