0

What I'm currently trying to do is put an Image over a JButton and still be able to click on the button. I don't mean putting an image into the button like some sort of icon. I mean having a image inside a JFrame and a button behind that image and being able to click on it. All help is appreciated. 

import java.awt.FlowLayout;
import javax.swing.JFrame;
import javax.swing.JButton;

public class ButtonImage extends JFrame{

    static JButton save;
    JButton cancel;
    ButtonImage(){
            save = new JButton("Save");
            cancel = new JButton("Cancel");

            setLayout(new FlowLayout());
            add(save);
            add(cancel);

            setVisible(true);
            setSize(400,300);
            setLocation(500,400);
            setDefaultCloseOperation(EXIT_ON_CLOSE);
            setLayout(null);
    }

    public static void main(String[]args){
            new ButtonImage();
            save.setBounds(100,200,90,30);
    }        
}
Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
Dino Calandra
  • 1
  • 2
  • Welcome to Stack Overflow, please take the [Tour](http://stackoverflow.com/tour). Please place your code in the question (not as an offsite link) to avoid link rot which makes your question useless in the future. – DavidPostill Aug 10 '14 at 16:54
  • Instead of a button, you could just use a `MouseListener`, so when the mouse clicks in a certain area, you can execute code (no button needed, assuming you wanted to hide your button behind the image) – Vince Aug 10 '14 at 17:06
  • 1
    *"and a button behind that image"* Sounds like another 'unusable GUI' in the making. I hope, for the sake of the end user, that this nonsense is abandoned. – Andrew Thompson Aug 10 '14 at 17:56
  • But, `JButton` supports images...why reinvent the wheel...also why use a `null` layout... – MadProgrammer Aug 11 '14 at 00:55
  • It almost sounds like you want an image as the background of the panel that has a button on it. If so, there's plenty of examples here, such as: http://stackoverflow.com/questions/5912913/how-can-i-put-a-jbutton-on-an-image?lq=1 – splungebob Aug 11 '14 at 03:56

1 Answers1

2

If you image fully covers the button, just put a click listener on the image, and forget about the button. Or better yet, the JButton can take an image as it's contents, so alter the JButton's look and feel to not draw the button borders, and add the image.

If those techniques don't work for you (say you want to partially see the button behind the image, then still consider putting the image in the button, but compost your image to contain the portion of the button that will be visible.

There are a number of very good reasons for this.

  1. You don't have to worry about fighting for focus, so your image can't swallow the mouse click.
  2. Tab and arrow hot keys will work appropriately, as will the "enter to click" behaviors.
  3. Your code will read better, which will help you finish the project faster and ease in maintenance.

Now, if the image never overlaps the button, then just layout an image above the button; however, in your write up, it seems you are trying to do something quite different.

Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
Edwin Buck
  • 69,361
  • 7
  • 100
  • 138
  • 1
    Here is [an example](http://stackoverflow.com/a/10862262/418556) of carving up an image tile-set into 4 buttons and 5 labels. As an alternative to the usual focus indication, it uses an 'on focus' image with a (crude) red border. Edit: Oops! By 'on focus' I meant 'on pressed'. ;) – Andrew Thompson Aug 11 '14 at 05:20
  • 1
    @AndrewThompson Thank you for the example. I agree the red border doesn't look that good, too bad they didn't use the button's support for multiple images, with an "onEntered" image and an "onClicked" image. – Edwin Buck Aug 11 '14 at 13:10
  • They, being me, did not want to make the code too long! ;) – Andrew Thompson Aug 11 '14 at 13:26
  • 1
    @AndrewThompson Well, pleased to make your acquaintance. I suspected that if someone was to put in that much effort (it looks really nice), then the red border was an intermediate step towards the obvious image based highlighting. Nice job on that one, it really looks good. – Edwin Buck Aug 11 '14 at 13:28