I love to play Poker and Blackjack online and I would like to duplicate how one of these casinos displays chips on the screen. We have all see this type of button before...

An image of a $1 chip is shown at the bottom of the screen. As we mouse over it, the image is "switched" and the chip appears to jump up off the table. Move the mouse away and it returns to its "normal" state. If we click on the mouse, the normal state image is switched with a "selected" state image, and so on.

Because I lack knowledge of this subject, I also lack the "vocabulary" that would enable me to perform a successful search for this. I am additionally hampered by the fact that all of these goofy "JavaScript" programmers clutter up my search results because they keep calling "JavaScript" programming, "Java" programming (grrrrrr, morons).

All that being said, I would love it if you all would point me to some basic examples that shows how to create an "image map" that would interact (switch images) with the mouse.

I am assuming that this would involve a "mouselistener" or some such mechanism, but I am unsure of exactly what I need and how to implement it.


PS No "applets" please, lets just stick to the basics.

Lets "flesh out" the requirements just a little more, since I would be getting to this eventually anyway...

As is the case for most "poker chips", the image I am using is elliptical in shape, that is, the images itself is rectangular, and the chip is elliptical and is surrounded by "transparent" pixels for the background. I would like to restrict the response to the "mouse overs" and "mouse clicks" to the area directly over the chip and NOT the transparent background.

I realize that makes it exponentially more complicated, but I figured since I opened the door, I might as well step all the way through it. :)


See this link. It doesn't do the mouse over bit, but it does handle the click, so it should get you started. Also, the code just draws a circle for the button, but you can change the paint method to draw an image, something like this:

class JImageButton extends JComponent {
    private BufferedImage img = null;

    public JImageButton(BufferedImage img) {
        this.img = img;
        setMinimumSize(new Dimension(img.getWidth(), img.getHeight()));

    public void paintComponent(Graphics g) {
        g.drawImage(img, 0, 0, img.getWidth(), img.getHeight(), null);
This article has been dead for over six months. Start a new discussion instead.