How to replace an image with another image when mouse is pressed?

Hello! completely new to processing here, having started it for a university module. I have created a really simple code for a an image of a balloon that changes to a picture of a "pop" when it is pressed, however I'm having trouble with replacing the image, it simply ends up overlaying it? similarly, I have tried to code my sketch so that the dimensions of the image has to be clicked on for the image to change, but my code annoyingly just lets you click anywhere in the sketch and it changes. Any sort of help would be much appreciated! thank you!

                    PImage balloon;
                    PImage balloonPop;
                    float r1; //
                    float r2; //
                    void setup() { //
                      background(255, 204, 0);
                      size(1200, 700);
                      balloon = loadImage("processingballoon.png");
                      balloonPop = loadImage("processingballoon2.png");
                      r1 = random(width);
                      r2 = random(height);
                    }
                    void draw() {
                      image(balloon, r1, r2);} //


                    void mousePressed(){
                      println(mouseX,mouseY);
                     if (mouseX > r1  && mouseX < (r1 + balloon.width) && mouseY > r2 && mouseY < (r2 + balloon.height ));
                    {
                    background(255, 204, 0);
                    image(balloonPop,r1,r2);
                    }
                     }