adding images in JFrame, image when clicked

Question

I want to make a "simple" program. it consists of three buttons and when you click on one of them i want a picture to show up, but i don't know how to add the image properly. If anyone has played pokemon i want to make the start where you select your starter pokemon.

Here is my code.

public LayoutLek(){

    super("Starter");
    panel=new JPanel();
    panel.setLayout(new GridLayout(2,1));
    top_p=new JPanel();                             

    label1=new JLabel("Make a choice");
    label1.setFont(new Font("Arial", Font.BOLD, 30));
    label1.setForeground(Color.black);

    ImageIcon green = new ImageIcon("Bilder/bulbasaur.jpg");   //Dont know if it is correct but...
    JLabel label2 = new JLabel(green);

    top_p.setBackground(Color.yellow);
    top_p.add(label1);
    bottom_p=new JPanel();                          
    bottom_p.setLayout(new GridLayout(1,3));

    panel.add(top_p);
    panel.add(bottom_p);

    button1=new JButton("Button 1");
    button1.setBackground(Color.green);
    button1.setForeground(Color.black);
    button1.setFont(new Font("Arial", Font.BOLD, 24));
    button2=new JButton("Button 2");
    button2.setBackground(Color.red);
    button2.setForeground(Color.black);
    button2.setFont(new Font("Arial", Font.BOLD, 24));
    button3=new JButton("Button 3");
    button3.setBackground(Color.blue);
    button3.setForeground(Color.black);
    button3.setFont(new Font("Arial", Font.BOLD, 24));

    bottom_p.add(button1);
    bottom_p.add(button2);
    bottom_p.add(button3);

    button1.addActionListener(this);
    button2.addActionListener(this);
    button3.addActionListener(this);

    this.add(panel);
    //this.setSize(350, 300);
    this.pack();
    this.setVisible(true);
    this.setDefaultCloseOperation(EXIT_ON_CLOSE);
    this.setAlwaysOnTop(true);

}

public static void main(String[] args) {
    new LayoutLek();

}

public void actionPerformed(ActionEvent e) {
    System.out.println("Clicked");      //Just to test
    Object src = e.getSource();
    if(src==button1){
                       //Here should the image show up
    }
    else if(src==button2){

    }
    else if(src==button3){

    }

}

If anyone can help i would be thankful!

Answer 1

1. Images that are embedded into your program should be loaded from the class path, not the file system. When you pass a String to the ImageIcon your telling the program to look in the file system. To load from the class path, use

    new ImageIcon(getClass().getResource("/Bilder/bulbasaur.jpg"); 

   where Bilder need to be in the src

2. Your JLabel label2 is locally scoped within the constructor, so you can't access it from outside the constructor, ie the actionPerformed . You need to declare it outside the constructor, as class members, as you seem to have done with your other objects.

3. Have all three ImageIcons already initialized As class members also.

4. Just use label2.setIcon(oneOfTheImageIcons); in the actionPerformed to change the icon of the JLabel

5. Swing apps should be run from the Event Dispatch Thread. You can do so by wrapping your new LayoutLek(); in a SwingUtilities.invokeLater.. . See Initial Threads for complete details.

6. You never add your label2 to a visible conainter.

After fixing all the above mentioned points, here is a runnable refactor. You just need to change your file paths accordingly.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import static javax.swing.JFrame.EXIT_ON_CLOSE;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class LayoutLek extends JFrame implements ActionListener {

    JPanel panel;
    JPanel top_p;
    JLabel label1;
    JPanel bottom_p;
    JButton button1;
    JButton button2;
    JButton button3;

    ImageIcon green;
    ImageIcon blue;
    ImageIcon red;
    JLabel label2;

    public LayoutLek() {
        super("Starter");

        green = new ImageIcon(getClass().getResource("/path/to/imgage"));
        blue = new ImageIcon(getClass().getResource("/path/to/imgage"));
        red = new ImageIcon(getClass().getResource("/path/to/imgage"));
        label2 = new JLabel(green);

        panel = new JPanel();
        panel.setLayout(new GridLayout(2, 1));
        top_p = new JPanel();

        label1 = new JLabel("Make a choice");
        label1.setFont(new Font("Arial", Font.BOLD, 30));
        label1.setForeground(Color.black);

        top_p.setBackground(Color.yellow);
        top_p.add(label1);
        bottom_p = new JPanel();
        bottom_p.setLayout(new GridLayout(1, 3));

        panel.add(top_p);
        panel.add(bottom_p);

        button1 = new JButton("Button 1");
        button1.setBackground(Color.green);
        button1.setForeground(Color.black);
        button1.setFont(new Font("Arial", Font.BOLD, 24));
        button2 = new JButton("Button 2");
        button2.setBackground(Color.red);
        button2.setForeground(Color.black);
        button2.setFont(new Font("Arial", Font.BOLD, 24));
        button3 = new JButton("Button 3");
        button3.setBackground(Color.blue);
        button3.setForeground(Color.black);
        button3.setFont(new Font("Arial", Font.BOLD, 24));

        bottom_p.add(button1);
        bottom_p.add(button2);
        bottom_p.add(button3);

        button1.addActionListener(this);
        button2.addActionListener(this);
        button3.addActionListener(this);

        this.add(panel);
        this.add(label2, BorderLayout.PAGE_START);
        //this.setSize(350, 300);
        this.pack();
        this.setVisible(true);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setAlwaysOnTop(true);

    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable(){
            public void run() {
                new LayoutLek();
            }
        });
    }

    public void actionPerformed(ActionEvent e) {
        System.out.println("Clicked");      //Just to test
        Object src = e.getSource();
        if (src == button1) {
            label2.setIcon(green);
        } else if (src == button2) {
            label2.setIcon(blue);
        } else if (src == button3) {
            label2.setIcon(red);
        }
    }
}

Answer 2

Firstly, src.equals(button1) . It's better practise to use the object-based equals method, == is better applied to primitive comparison (ie int , long , boolean , etc).

Secondly, you can do a couple of things.

1. Add the image to a container, then remove it and add another each time a button is clicked.

2. Add all three images to a container, set them all to invisible ( setVisible(false) ) and then in src.equals(button1/2/3) you set the appropriate image to visible. Container may need to be repainted.

Hope this helps!