hi i am trying to make a midterm with processing and what i am trying to do is to define areas on the screen and when clicked on that area it shows a different animated gif! i got the same code prom the examples online and trying to modify it but i am soo bad at it!! so please please help me how i can define areas in this kind of code... it should be somethign like


if(mousePressed); {
if(mouseX <=100 && mouseY >=100);
animation.display (xpos-animation1.getwidth()/2,ypos);
else if(mouseX <=100 && mouseY <=100);
animation1.display (xpos-animation1.getwidth()/2,ypos);

} it is just not workninngg!!!
and thats the whole code below~

AniSprite animation1, animation2;
float xpos, ypos;
float drag = 30.0;

void setup()
{
 size(200,200);
 background(255, 204, 0);
 frameRate(24);
 animation1 = new AniSprite("PT_Shifty_00", 38);
 animation2 = new AniSprite("PT_Teddy_00", 60);
}

void draw()
{
 float difx = mouseX - xpos;
 if(abs(difx) > 1.0) {
   xpos = xpos + difx/drag;
   xpos = constrain(xpos, 0, width);
 }

 // Display the sprite at the position xpos, ypos
 if(mousePressed) {
   background(153, 153, 0);
   animation1.display(xpos-animation1.getWidth()/2, ypos);
 } else {
   background(255, 204, 0);
   animation2.display(xpos-animation1.getWidth()/2, ypos);
 }
}


// Class for animating GIFs

class AniSprite
{
 PImage[] ani;
 int frame;
 int numFrames;
 
 AniSprite(String imageName, int frameCount) {
   numFrames = frameCount;
   ani = new PImage[numFrames];
   loadImages(imageName);
 }

 void loadImages(String name) {
   for(int i=0; i<numFrames; i++) {
     String imageName = name + ((i < 10) ? "0" : "") + i + ".gif";
     ani[i] = loadImage(imageName);
   }
 }

 void display(float xpos, float ypos)
 {
   frame = (frame+1)%numFrames;
   image(ani[frame], xpos, ypos);
 }
 
 int getWidth() {
   return ani[0].width;
 }

}