Me and some classmates are working on a virtual tour for a client for school. At the bottom of the sketch above a slider that pans panoramas left and right are navigation buttons to navigate to other rooms. I made rollover graphics for the current navigation buttons on the screen (and graphics for when the button is clicked as well) but am not sure how or where to place it in my code. For each navigation button I have 3 images (for example pantryb1 (when static), pantryb2 (rollover), pantry3(when clicked)). How would I go about this? Thanks in advance and I appreciate the help!

// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="seedTop.jpg,seedBottom.jpg"; */


HScrollbar hs1; 

//These images below consist of our panoramas, header, footer, buttons, etc.

//Panorama Images have a p at the end

PImage foyerp, hygeinep, pantryp, kitchenp, dininghallp, con1p, con2p,
footer;

//Navigation buttons have a b at the end

PImage con1b1, con1b2, con1b3, con2b1, con2b2, con2b3, diningb1, diningb2,
diningb3, foyerb1, foyerb2, foyerb3, cafeb1, cafeb2, cafeb3, hygieneb1,
hygieneb2, hygieneb3, kitchenb1, kitchenb2, kitchenb3, computerb1,
computerb2, computerb3, pantryb1, pantryb2, pantryb3;


//A little bit about void setup:
//This area simply sets up the dimensions of our sketch and the scroll-bar.
//Also where Processing will attempt to load our images we listed above.
void setup() {
  size(1024, 680);
  noStroke();
 
  hs1 = new HScrollbar(0, height-8, width, 16, 16);
 
// Load images
  pantryp = loadImage("pantry.jpg");
  footer = loadImage("footer.png");
  foyerb1 = loadImage("newnavbuttons/foyer1.png");
  foyerb2 = loadImage ("newnavbuttons/foyer2.png");
  foyerb3 = loadImage ("newnavbuttons/foyer3.png");
  hygieneb1 = loadImage ("newnavbuttons/hygieneroom1.png");
  hygieneb2 = loadImage ("newnavbuttons/hygieneroom2.png");
  hygieneb3 = loadImage ("newnavbuttons/hygieneroom3.png");
  diningb1 = loadImage ("newnavbuttons/dininghall1.png");
  diningb2 = loadImage ("newnavbuttons/dininghall2.png");
  diningb3 = loadImage ("newnavbuttons/dininghall3.png");
  kitchenb1 = loadImage ("newnavbuttons/kitchen1.png");
  kitchenb2 = loadImage ("newnavbuttons/kitchen2.png");
  kitchenb3 = loadImage ("newnavbuttons/kitchen3.png");
  con1b1 = loadImage ("newnavbuttons/conferenceroom1.png");
  con1b2 = loadImage ("newnavbuttons/conferenceroom2.png");
  con1b3 = loadImage ("newnavbuttons/conferenceroom3.png");
  con2b1 = loadImage ("newnavbuttons/conferenceroomalt1.png");
  con2b2 = loadImage ("newnavbuttons/conferenceroomalt2.png");
  con2b3 = loadImage ("newnavbuttons/conferenceroomalt3.png");
  computerb1 = loadImage ("newnavbuttons/computerlab1.png");
  computerb2 = loadImage ("newnavbuttons/computerlab2.png");
  computerb3 = loadImage ("newnavbuttons/computerlab3.png");
  pantryb1 = loadImage ("newnavbuttons/pantry1.png");
  pantryb2 = loadImage ("newnavbuttons/pantry2.png");
  pantryb3 = loadImage ("newnavbuttons/pantry3.png");
 
 
 
 
}

void draw() {
  background(255);
 
 

 
  // Get the position of the img1 scrollbar
  // and convert to a value to display the img1 image
  float pantrypPos = hs1.getPos()-width/2;
  fill(255);
  image(pantryp, width/2-pantryp.width/2 + pantrypPos*1.5, 0);
 
  image(footer, 0, 550);
 
  image(foyerb1, 25, 558);
 
  image(computerb1, 145, 558);
 
  image(diningb1, 270, 558);
 
  image(con1b1, 395, 558);
 
  image(con2b1, 520, 558);
 
  image(kitchenb1, 645, 558);
 
  image(pantryb1, 770, 558);
 
  image(hygieneb1, 900, 558);
 
 

 
 
 
 
 
 
  hs1.update();
  hs1.display();
 
  stroke(0);
 
}



class HScrollbar {
  int swidth, sheight;    // width and height of bar
  float xpos, ypos;       // x and y position of bar
  float spos, newspos;    // x position of slider
  float sposMin, sposMax; // max and min values of slider
  int loose;              // how loose/heavy
  boolean over;           // is the mouse over the slider?
  boolean locked;
  float ratio;

  HScrollbar (float xp, float yp, int sw, int sh, int l) {
    swidth = sw;
    sheight = sh;
    int widthtoheight = sw - sh;
    ratio = (float)sw / (float)widthtoheight;
    xpos = xp;
    ypos = yp-sheight/2;
    spos = xpos + swidth/2 - sheight/2;
    newspos = spos;
    sposMin = xpos;
    sposMax = xpos + swidth - sheight;
    loose = l;
  }

  void update() {
    if(overEvent()) {
      over = true;
    } else {
      over = false;
    }
    if(mousePressed && over) {
      locked = true;
    }
    if(!mousePressed) {
      locked = false;
    }
    if(locked) {
      newspos = constrain(mouseX-sheight/2, sposMin, sposMax);
    }
    if(abs(newspos - spos) > 1) {
      spos = spos + (newspos-spos)/loose;
    }
  }

  float constrain(float val, float minv, float maxv) {
    return min(max(val, minv), maxv);
  }

  boolean overEvent() {
    if(mouseX > xpos && mouseX < xpos+swidth &&
       mouseY > ypos && mouseY < ypos+sheight) {
      return true;
    } else {
      return false;
    }
  }

  void display() {
    noStroke();
    fill(204);
    rect(xpos, ypos, swidth, sheight);
    if(over || locked) {
      fill(0, 0, 0);
    } else {
      fill(102, 102, 102);
    }
    rect(spos, ypos, sheight, sheight);
  }

  float getPos() {
    // Convert spos to be values between
    // 0 and the total width of the scrollbar
    return spos * ratio;
  }
}