Dear All,

I have tried to write the following code to create a 4 buttons interactive menu below an image, but apparently the highlighted area is incorrect. Could you please help me understand how I can correct it?

//-------------CODE:

// I have added the image file using sketch > Add File > "Assessment.jpg"
// Image has been previously downsampled to 640 x 470

// I name the image as well as the buttons I am going to create:
PImage img;
int TopButtonY, BottomButtonY, Button1x, Button2x, Button3x, Button4x, Button5x, Button6x, Button7x, Button8x, Button9x;

//Estabishing position buttons, dimension of screen comprehending image + space for Buttons:
void setup() {
 img = loadImage("Assessment.jpg");
  size(img.width,(img.height + 56));
 
  TopButtonY=(img.height);
  BottomButtonY=(img.height+48);
  Button1x=0;
  Button2x=8;
  Button3x=158;
  Button4x=166;
  Button5x=316;
  Button6x=324;
  Button7x=474;
  Button8x=482;
  Button9x=632;
}
 
void draw() {
 
  //TopButtonY
  stroke(150);
  fill(150);
  rect(0,img.height,img.width,10);
 
  //Button1x
  stroke(150);
  fill(150);
  rect(0,img.height+8,8,40);
 
  //Button2x
  stroke(0,0,255);
  fill(0,0,255);
  rect(8,img.height+8,150,40);
 
  //Button3x
  stroke(150);
  fill(150);
  rect(158,img.height+8,8,40);
 
  //Button4x
  stroke(0,0,255);
  fill(0,0,255);
  rect(166,img.height+8,150,40);
 
  //Button5x
  stroke(150);
  fill(150);
  rect(316,img.height+8,8,40);
 
  //Button6x
  stroke(0,0,255);
  fill(0,0,255);
  rect(324,img.height+8,150,40);
 
  //Button7x
  stroke(150);
  fill(150);
  rect(474,img.height+10,8,40);
 
  //Button8x
  stroke(0,0,255);
  fill(0,0,255);
  rect(482,img.height+8,150,40);
 
  //Button9x
  stroke(150);
  fill(150);
  rect(632,img.height+8,8,40);
 
  //BottomButtonY
  stroke(150);
  fill(150);
  rect(0,img.height+48,img.width,10);
}

//----------------(REST OF CODE TO BE ADDED...)

Thanks! :)