Processing - Making an indication for mouse clicks on the image-buttons(ControlP5)

Question

I have 4 buttons that I've made from images using ControlP5 function. I wonder is there a way to make the clicks on them to be seen clearly. Right now there is no indication that they are being clicked. (Like a color change in the background of the button or any indication)

Here are the buttons:

     cp5.addButton("AREA_1")  // The button
    .setImage(img1)
    .setPosition(-16,10)     // x and y relative to the group
    .updateSize()
    .setFont(font)
    .moveTo(AreaRingGroup);   // add it to the group 
    ;     
  
  
    cp5.addButton("AREA_2")  // The button
    .setImage(img2)
    .setPosition(-15,170)    // x and y relative to the group
    .updateSize()
    .setFont(font) 
    .moveTo(AreaRingGroup);   // add it to the group  
  ; 
  
    cp5.addButton("AREA_3")  // The button
    .setImage(img3)
    .setPosition(150,184)     // x and y relative to the group
    .updateSize()
    .setFont(font)
    .moveTo(AreaRingGroup);   // add it to the group 
    ;     
  
  
    cp5.addButton("AREA_4")  // The button
    .setImage(img4)
    .setPosition(148,13)    // x and y relative to the group
    .updateSize()
    .setFont(font) 
    .moveTo(AreaRingGroup);   // add it to the group  
  ;

Answer 1

Instead of setImage you can use setImages to add separate images for normal, hover, and down states.

Take a look at the example file for ControlP5button. You can open it in Processing by going to File > Examples... and looking for it in the ControlP5 folder.

In this part they load the 3 images for the button states for the play button:

PImage[] imgs = {loadImage("button_a.png"),loadImage("button_b.png"),loadImage("button_c.png")};
cp5.addButton("play")
 .setValue(128)
 .setPosition(140,300)
 .setImages(imgs)
 .updateSize()
 ;