Hello,

I'm making a program where part of it is to have a button change tint when the mouse hovers over it. I am making my 'button' an image instead of say a rectangle. But when I hove over it, the entire image is getting tinted instead of just the one, I checked the order of operations and I'm not sure why it happened.
Code:

if (overButton(530, 280, rabbit.width, rabbit.height) == true){
      tint(255, 0, 0);
      image(rabbit, 530, 280);
      noTint();
      image(page1, 0, 0);
    }else{
      noTint();
    }  
 

And rabbit is just the image, here is 'overButton':
Code:

boolean overButton(int x, int y, int w, int h){
  if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
    return true; 
  } 
  else {
    return false; 
  }
}
 

I put the image of page1 after the rabbit, but either way the whole thing gets tinted as of now.

Thanks for any help!~

When you write "the entire image is getting tinted instead of just the one", what do you mean by the "entire image" and "just the one"?

Is something other than the "rabbit" button being tinted?

Does the tinting disappear when you move the mouse away from the rabbit button?

-spxl