Mouse over labels similar to IE toolbar

Question

I'd like to have a couple of labels, say B(bold), I(italic) and U(underline), when you put mouse over, it will raise and when you press or click, it will sink, but the label position should remain SAME all the time.
I have my sample codes below which does this, the only thing that doesn't work is that the label position tends to change. Any ideas or solutions?
import java.awt.event.*;
public class Test extends JPanel {
     JLabel b, i, u;
     Test() {
          setLayout( new BorderLayout() );
          JPanel np = new JPanel( );
          JPanel sp = new JPanel( new GridLayout(0,3) );
          b = createLabel("B", "Bold");
          i = createLabel("I","Italic");
          u = createLabel("U", "Underline");
          sp.add( b );
          sp.add( i );
          sp.add( u );
          np.add( sp );
          np.add( new JButton("OK") );
          add( np, BorderLayout.NORTH );
          JTextArea ta = new JTextArea(20,30);
          add( new JScrollPane( ta ), BorderLayout.CENTER );
     JLabel createLabel(String text, String tip) {
          JLabel l = new JLabel( text );
          l.setName("UNCLICKED");
          l.setToolTipText( tip );
          l.setHorizontalAlignment(JLabel.CENTER );
          l.setBorder( BorderFactory.createEmptyBorder(10,10,10,10) );
          l.addMouseListener( new MouseAdapter( ) {
               public void mouseEntered(MouseEvent e) {
                    JLabel l = (JLabel) e.getSource();
                    if ( "UNCLICKED".equals( l.getName() ) ) {
                         l.setBorder( BorderFactory.createCompoundBorder( BorderFactory.createRaisedBevelBorder(), BorderFactory.createEmptyBorder(10,10,10,10) ) );
               public void mouseExited( MouseEvent e) {
                    JLabel l = (JLabel) e.getSource();
                    if ( "UNCLICKED".equals( l.getName() ) ) {
                         l.setBorder( BorderFactory.createEmptyBorder(10, 10, 10, 10) );
               public void mousePressed( MouseEvent e ) {
                    JLabel l = (JLabel) e.getSource();
                    if ( "UNCLICKED".equals( l.getName() ) ) {
                         l.setBorder( BorderFactory.createCompoundBorder( BorderFactory.createLoweredBevelBorder(), BorderFactory.createEmptyBorder(10, 10, 10, 10) ) );
               public void mouseClicked( MouseEvent e ) {
                    JLabel l = (JLabel) e.getSource();
                    System.out.println("clicked with name " + l.getName() );
                    if ( "UNCLICKED".equals( l.getName() ) ) {
                         l.setBorder( BorderFactory.createCompoundBorder( BorderFactory.createLoweredBevelBorder(), BorderFactory.createEmptyBorder(10, 10, 10, 10) ) );
                         l.setName("CLICKED");
                    }else {
                         l.setBorder( BorderFactory.createEmptyBorder(10,10,10,10) );
                         l.setName("UNCLICKED");
          return l;
     public static void main(String args[] ) {
          JFrame f = new JFrame();
          f.setContentPane( new Test() );
          f.pack();
          f.setVisible(true);
}

Answer 1

I think the text moving because you sometimes use compoundBorder, sometimes use emptyBorder. Those borders have different thickness, and your text is squeezed.
Maybe you can try make your emptyBorder a little bit thicker, like (12, 12, 12, 12), see whether it can solve the problem.