JButton with background Image changing on mouse hover

Question

I'm trying to display an JButton with an image on it, but I can't figure out how to get Mousehover work on this. The normal display of the image is working, tough. Also it would be nice, if the text drawn on the button could be centered.

import java.awt.*;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.JButton;
import javax.swing.JFrame;

public class ImageButtonTest {

    private static JButton imageButton;

    public static void main(String[] args) throws IOException {
        JFrame frm = new JFrame();
        frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frm.setSize(90, 27);
        frm.setLocation(50, 50);
        Image image = ImageIO.read(new URL("http://i.imgur.com/bitgM6l.png"));
        Image imageHover = ImageIO.read(new URL("http://i.imgur.com/dt81BWk.png"));
        imageButton = new ImageButton(image, imageHover);
        imageButton.setText("Download");
        frm.add(imageButton);
        frm.pack();
        frm.setVisible(true);
    }

    static class ImageButton extends JButton {
        private Image image, imageHover;
        private boolean hover;

        ImageButton(Image image, Image imageHover) {
            this.image = image;
            this.hover = false;


            addMouseListener(new java.awt.event.MouseAdapter() {  
                @Override
                public void mouseEntered(java.awt.event.MouseEvent evt) {
                    hover = true;
                    repaint();
                }

                @Override
                public void mouseExited(java.awt.event.MouseEvent evt) {
                    hover = false;
                    repaint();
                }
            });
        };

        @Override
        protected void paintComponent(Graphics g) {

            if(isEnabled()) {
                Graphics2D g2 = (Graphics2D) g.create();
                g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
                g2.setFont(new Font("Arial", Font.PLAIN, 12));
                g2.setColor(Color.WHITE);

                if(hover) {
                    g2.drawImage(imageHover, 0, 0, getWidth(), getHeight(), this);
                } else {
                    g2.drawImage(image, 0, 0, getWidth(), getHeight(), this);
                }
                g2.drawString(getText(), 20, getHeight() / 2 + 5);

                g2.dispose();
            } else {
                super.paintComponent(g);
            }

        }

    }

}

Answer 1

Image image = ImageIO.read(new URL("http://i.imgur.com/bitgM6l.png")); Image imageHover = ImageIO.read(new URL("http://i.imgur.com/dt81BWk.png"));

you can to use standard methods implemented in

JButton API

//button.setBorderPainted(false);
//button.setBorder(null);
//button.setFocusable(false);
//button.setMargin(new Insets(0, 0, 0, 0));
button.setContentAreaFilled(false);
button.setIcon(icon());
button.setRolloverIcon(iconA());
button.setPressedIcon(iconB());
button.setDisabledIcon(iconC());

JButton.getModel().addChangeListener()

    JButton.getModel().addChangeListener(new ChangeListener() {
        @Override
        public void stateChanged(ChangeEvent e) {
            ButtonModel model = (ButtonModel) e.getSource();
            if (model.isRollover()) {
                button.setIcon(icon());
            } else {
                button.setIcon(iconA());
            } etc ...//  if (model.isPressed()) {
         }
    });