1. About ImageIcon Class
In the Last Example on JButton with ImageIcon, we learned how to display the Image in a Java Swing’s JButton. Now, we will see how to use these image icons as roll-over images. When mouse enters the JButton, we can change the default image with a new one. We call this image a Roll-Over image and the image stays till mouse cursor rests on the JButton. Once the mouse cursor leaves the JButton, the default image will be displayed. We can also show a different image when user pressed the push button, and the image is called Pressed-Image.
2. About the Example
The below screen shows the JFrame Window, which we will create in this example:
In the above example, we have three Java Swing JButtons. All these buttons display a normal image when the JFrame displays. Each button will display three image icons based on the mouse action. The images for Normal, button pressed and mouse-enter are shown in the above screen. Let us proceed with the example and start coding.
3. Create JButton Rollover Image Icons
In the below code, we create three ImageIcon instances from the images living in the C:\Temp folder. You can create your own image or copy the images from the above screenshot using Paint Brush option, select & cut. We use these ImageIcons for the mouse actions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public class JFrameDemo extends JFrame { public JFrameDemo(String title) throws HeadlessException { super(title); //Sample 01: Set Size and Position setBounds(100, 100, 500, 100); Container ControlHost = getContentPane(); ControlHost.setLayout(new FlowLayout()); //Sample 02: Create Image Icons ImageIcon IconNormal = new ImageIcon("C:\\Temp\\Normal.png"); ImageIcon IconRollOver = new ImageIcon("C:\\Temp\\RollOver.png"); ImageIcon IconPressed = new ImageIcon("C:\\Temp\\Pressed.png"); |
4. Enable JButton Rollover
Now, we will create all three buttons. You can note that in the constructor, we do pass the ImageIcon instance. Before adding these JButtons to the JFrame window, we enable the roll-over behaviour via the method call
setRolloverEnabled. Once we enable it, Swing will take care of tracking the mouse events and displaying the relevant ImageIcons.
|
1 2 3 4 5 6 7 8 9 10 |
//Sample 03: Create a JButton and Enable RollOver JButton btn1 = new JButton(); JButton btn2 = new JButton(); JButton btn3 = new JButton(); btn1.setRolloverEnabled(true); btn2.setRolloverEnabled(true); btn3.setRolloverEnabled(true); ControlHost.add(btn1); ControlHost.add(btn2); ControlHost.add(btn3); |
5. Assign JButton Rollover Icons
The method
setIcon method will set the default Icon for the button. When the mouse is not interacting with the JButton, Swing will display this image on the button. In our case, we set IconNormal instance to all three buttons. Method
setRolloverIcon will set the Icon, which Swing will display when the mouse cursor enters the JButton component. Whereas the
setPressedIcon will set the icon, which will display while user pressing the button and not released the mouse. So, to see this image, one should hold-down the mouse button. Also note when we do not specify an icon using the method setPressedIcon, swing will show the default icon/image which was set using the setIcon method.
|
1 2 3 4 5 6 7 8 9 10 |
//Sample 04: Now assign all the Icons (Run 1) btn1.setIcon(IconNormal); btn1.setRolloverIcon(IconRollOver); btn1.setPressedIcon(IconPressed); btn2.setIcon(IconNormal); btn2.setRolloverIcon(IconRollOver); btn2.setPressedIcon(IconPressed); btn3.setIcon(IconNormal); btn3.setRolloverIcon(IconRollOver); btn3.setPressedIcon(IconPressed); |
You can watch how this example works in the below Youtube video.
6. JButton Rollover Images – Youtube Demo
7. Code Reference
7.1 MainEntry.java
|
1 2 3 4 5 6 7 8 9 |
package tube.coding.examples; public class MainEntry { public static void main(String[] args) { //Sample 07: Create Instance of JFrameDemo JButtonRollOverExample frame = new JButtonRollOverExample("JButton RollOver Image"); frame.setVisible(true); } } |
7.2 JButtonRollOverExample.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
package tube.coding.examples; import java.awt.Container; import java.awt.FlowLayout; import java.awt.HeadlessException; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JOptionPane; import javax.swing.JTextField; import javax.swing.SwingConstants; public class JButtonRollOverExample extends JFrame { public JButtonRollOverExample(String title) throws HeadlessException { super(title); //Sample 01: Set Size and Position setBounds(100, 100, 500, 100); Container ControlHost = getContentPane(); ControlHost.setLayout(new FlowLayout()); //Sample 02: Create Image Icons ImageIcon IconNormal = new ImageIcon("C:\\Temp\\Normal.png"); ImageIcon IconRollOver = new ImageIcon("C:\\Temp\\RollOver.png"); ImageIcon IconPressed = new ImageIcon("C:\\Temp\\Pressed.png"); //Sample 03: Create a JButton and Enable RollOver JButton btn1 = new JButton(); JButton btn2 = new JButton(); JButton btn3 = new JButton(); btn1.setRolloverEnabled(true); btn2.setRolloverEnabled(true); btn3.setRolloverEnabled(true); ControlHost.add(btn1); ControlHost.add(btn2); ControlHost.add(btn3); //Sample 04: Now assign all the Icons (Run 1) btn1.setIcon(IconNormal); btn1.setRolloverIcon(IconRollOver); btn1.setPressedIcon(IconPressed); btn2.setIcon(IconNormal); btn2.setRolloverIcon(IconRollOver); btn2.setPressedIcon(IconPressed); btn3.setIcon(IconNormal); btn3.setRolloverIcon(IconRollOver); btn3.setPressedIcon(IconPressed); } } |
Categories: Swing
Tags: ImageIcon, JButton, setIcon, setPressedIcon, setRolloverEnabled, setRolloverIcon
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.