# Make button disappear when clicked

**URL:** <https://discourse.processing.org/t/make-button-disappear-when-clicked/7916>\
**Category:** Coding Questions\
**Created:** [January 28, 2019, 11:07pm UTC](https://discourse.processing.org/t/make-button-disappear-when-clicked/7916 "2019-01-28T23:07:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![madsstella](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@madsstella](https://discourse.processing.org/u/madsstella)\
**Post date:** [January 28, 2019, 11:07pm UTC](https://discourse.processing.org/t/make-button-disappear-when-clicked/7916/1 "2019-01-28T23:07:33Z")

</div>

I know this is simple, probably. I just can’t figure it out on my own ☹ I want to make an interactive character builder through asking questions and choosing options. I got the start menu up, with a button that changes as you hover, but I can’t figure out how to make the title image and the button disappear when the button is clicked. I want to keep the background image. After the button is clicked it will bring up another image that lists some info, and then a next button will make _that_ image disappear, and then bring up some text, images, and other buttons.

I only have the menu part. How do I get rid of “title” “tButton” and “hButton” PImages on the screen when pressing the button, so the next transparent image can be displayed in the middle of the screen with just the forest background behind it?

I hope I am clear, and that I organized my sketch to be understandable! Code is below, it is not runnable until you // out the void mousePressed function.

Thank you so much!!

````auto
 boolean buttonOver = false; //is the user hovering over the button
 int buttonX, buttonY; //position of start button
 int buttonSize = 280; //diameter of button

                      //images for the title screen and start button

void setup() {
  size(900, 700); //size

 PImage img;
 img = loadImage("forestBG.jpg"); //background image is by https://www.youtube.com/watch?v=Ic3ZdD5ko7k
 background(img);

 buttonX = 330; //button location
 
 buttonY = 380; //button location

}

void draw() {
  
 update(mouseX, mouseY); //updating whether mouse is over button or not
  
 PImage title; 
  title = loadImage ("titleScreen.png"); //title Screen Image
   image(title, 0, 0);
  
 PImage tButton;
  tButton = loadImage ("StartButton.png"); //Button Image
   image(tButton, 330, 380);
  
 PImage hButton;
  hButton = loadImage ("hoversbutton.png"); //hovered button image
  
  if (buttonOver) {
    image(hButton, 330, 380); //if button is hovered over, it changes images
    
  }  
}

void update(int x, int y) { //my function, when the cursor is over the button, it changes images, then changes back when its not on it
  if (overButton(buttonX, buttonY, 280, 151) ) {
    buttonOver = true;
  } else {
    buttonOver = false;
  }
}

void mousePressed() { //THIS is where I am trying to get a mouse click on the button to trigger the removal of images "title" and "tbutton" and "hbutton" from the screen? so that I can show the next image with info and start coding my interactive questionnairre... 
  if (buttonOver){
    hButton = null;
    tButton = null;
    title = null;
  }
}

boolean overButton (int x, int y, int width, int height) { //if the mouse is in the button area, or not
  if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
![menuscreen|615x500](upload://oHSsjm0d0bcUzm4UXImLO6oQbhG.jpeg) ```
````

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [January 29, 2019, 1:35am UTC](https://discourse.processing.org/t/make-button-disappear-when-clicked/7916/2 "2019-01-29T01:35:40Z")

</div>

\*\*\*Updated

I have modified your code to sort of make it functional. This is just to demonstrate some concepts that you need to use that are fundamental to Processing:

- Setup is executed only once (ideally)
- Draw is executed it 60 fps aka. it is called very often
- When loading resources like images, it is usually done in setup as you would load image only once
- Based on the description of your goal, you need to become familiar with states. ~~I will update this post shortly with some links of previous posts showing the concept.~~ Post explaining states: [https://forum.processing.org/two/discussion/24867/make-the-typing-appear-after-the-mouse-click-and-stay-on-the-screen#latest](https://forum.processing.org/two/discussion/24867/make-the-typing-appear-after-the-mouse-click-and-stay-on-the-screen#latest)

Code below for your consideration.

Kf

```java
boolean buttonOver = false; //is the user hovering over the button
int buttonX, buttonY; //position of start button
int buttonSize = 280; //diameter of button

//images for the title screen and start button

PImage img;
PImage title; 
PImage tButton;
PImage hButton;

void setup() {
  size(900, 700); //size

  img = loadImage("b.jpg"); //background image is by https://www.youtube.com/watch?v=Ic3ZdD5ko7k
  title = loadImage ("a.jpg"); //title Screen Image
  tButton = loadImage ("c.jpg"); //Button Image
  hButton = loadImage ("d.jpg");

  buttonX = 330; //button location
  buttonY = 380; //button location
}

void draw() {
  image(img, 0, 0, width, height);
  update(mouseX, mouseY); //updating whether mouse is over button or not

  image(title, 0, 0);
  image(tButton, 330, 380);

  //hovered button image
  if (buttonOver) {
    image(hButton, 330, 380); //if button is hovered over, it changes images
  }
}

void update(int x, int y) { //my function, when the cursor is over the button, it changes images, then changes back when its not on it
  if (overButton(buttonX, buttonY, 280, 151) ) {
    buttonOver = true;
  } else {
    buttonOver = false;
  }
}

void mousePressed() { //THIS is where I am trying to get a mouse click on the button to trigger the removal of images "title" and "tbutton" and "hbutton" from the screen? so that I can show the next image with info and start coding my interactive questionnairre... 
  if (buttonOver) {
    //hButton = null;
    //tButton = null;
    //title = null;
  }
}

boolean overButton (int x, int y, int width, int height) { //if the mouse is in the button area, or not

  return (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) ;
}

```

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [January 29, 2019, 3:20am UTC](https://discourse.processing.org/t/make-button-disappear-when-clicked/7916/3 "2019-01-29T03:20:49Z")

</div>

@madsstella also in the future try to include a descriptive title for your post. This is an interesting project 🙂