before i begin, a few things to keep in mind:

any variables that you declare in the setup will *not* be accessible to the rest of the program.  most of the time you want to declare your variables above the setup and then assign them inside the setup if they are needed at the start of your program.  sometimes, i declare and assign outside of setup.  in your case you'll want to do something like this:

PImage img;

void setup()
{
  size(850 ,638);
  background(0);
  img = loadImage("cortinaanimationfilms2.jpg");  
  //other stuff
}

second, your program will run sequentially, so as it currently stands you are overriding the value of img each time you load an image to it.  this will kind of work when you want to display them first in the setup function.  however, the reason why is because the setup function only runs once.  suppose you moved everything in setup into the draw function.  this will also kind of work, but you won't be able to change images because each time you change img, your change will be overridden by the continual re-asignment of the same img variable with the different images.

on to the main event:

if i understand you correctly, you'd like to have a large background image that changes when you click on other thumbnail images?  if so, i think you'll want to start by having a different PImage for every image that you will want to show instead of just one img.  the "beginners" way would be to do something like the following (warning: some portions in psuedocode).

PImage cat;
PImage dog;
PImage bear;
PImage background;

void setup(){
  //setup size, background, etc.
  cat = loadImage("cat.jpg");  
  dog = loadImage("dog.jpg");  
  bear = loadImage("bear.jpg");
  background = cat; //starting image for background
}

void draw(){
  image(background, 0,0, width, height);
  image(cat,200,500, 50, 50);
  image(dog,400,500, 50, 50);
  image(bear,600,500, 50, 50);
}

void mousePressed(){
  // if your mouse is within the x and y values of the thumbnail image, switch the background image.
  if( (mouseX > 200 && mouseX < 250) && (mouseY > 500 && mouseY < 550) ) { //actual values may differ
      background = cat;
  } else if(mouseX and mouseY are in the dimensions of the second thumbnail){
      background = dog;
  } else if (//and on and on) {
      background = bear;
  }
}

a more advanced way would be to use a PImage Array lets call it myImages, and put each image into an element in that array.  then, instead of saying background = cat, you could do background = myImages[0].  it's not really necessary when dealing with a few images, but if you are dealing with a lot, a PImage array could be helpful.

Thanks for your help. Although it gives error. I'll show you:


PImage img;
PImage cat;
PImage dog;
PImage bear;
PImage background;

void setup(){
  size(850 ,638);
  background(0);
  img = loadImage("cortinaanimationfilms2.jpg"); 
  image(img,0,0);
 
  cat = loadImage("studio2.jpg"); 
  dog = loadImage("story2.jpg"); 
  bear = loadImage("year2.jpg");
  background = img; //starting image for background
}

void draw(){
  image(background, 0,0, width, height);
  image(cat,200,500, 100, 80);
  image(dog,400,500, 100, 80);
  image(bear,600,500, 100, 80);
}


Until here it's all ok.

But when I introduce the void mousePressed it gives error. Please help me

void mousePressed(){
  // if your mouse is within the x and y values of the thumbnail image, switch the background image.
  if( (mouseX > 200 && mouseX < 300) && (mouseY > 500 && mouseY < 580) ) { //actual values may differ
      background = cat;
  } else if(mouseX > 400 && mouseX < 500)&&(mouseY > 500 && mouseY < 580){
      background = dog;
  } else if (mouseX > 600 && mouseX < 700) && (mouseY >500 && mouseY < 580) {
      background = bear;
  }
}


unexpected token: &&

} else if(mouseX > 400 && mouseX < 500)&&(mouseY > 500 && mouseY < 580){

Watch your parentheses!

1.   } else if( (mouseX > 400 && mouseX < 500) && (mouseY > 500 && mouseY < 580) ){

when you see that it typically means that you do not have enough parentheses:

here's the one I wrote:
(     (     mouseX > 200 && mouseX < 300     )      &&      (     mouseY > 500 && mouseY < 580     )     )

compare with yours:

(          mouseX > 400 && mouseX < 500     )       &&      (     mouseY > 500 && mouseY < 580           )

should be (new parentheses in green):

(     (   mouseX > 400 && mouseX < 500     )       &&      (     mouseY > 500 && mouseY < 580      )     )

In this case the extra parentheses are not need are they? 

not technically, no.  it's a matter of personal style.

personally, i like it to read:

if these two cases and these other two cases

over

if this case and this case and this case and this case.

that's just me.

computers don't seem to care how fly my style is; yet.

Thanks for answering.

hi,

I have this code, that shows me 3 buttons and when I click it change the background:

PImage img;
PImage studio;
PImage story;
PImage year1;
PImage studioc;
PImage storyc;
PImage yearc;
PImage background;

void setup(){
  size (850,638);
  background(0);
  img=loadImage("cortinaanimationfilms2.jpg");
  image(img,0,0);
 
  studio=loadImage("studio2.jpg");
  story=loadImage("story2.jpg");
  year1=loadImage("year2.jpg");
  studioc=loadImage("studiocortina.jpg");
  storyc=loadImage("storycortina.jpg");
  yearc=loadImage("yearcortina.jpg");
  background= img;
  }
 
  void draw(){
    image(studioc,0,0,width,height);
    image(storyc,0,0,width,height);
    image(yearc,0,0,width,height);
    image(background,0,0,width,height);
    image(studio,200,500,100,80);
    image(story,400,500,100,80);
    image(year1,600,500,100,80);

  }
 
  void mousePressed(){
    if(mouseX>200 && mouseX <300 && mouseY>500 && mouseY <580){
      background=studioc;
      } else if(mouseX > 400 && mouseX < 500 && mouseY > 500 && mouseY < 580){
      background = storyc;
  } else if (mouseX > 600 && mouseX < 700 && mouseY >500 && mouseY < 580) {
      background = yearc;
  }
}

-----------------------------------

but the buttons remains there. I wanna know if theres some code that hide the previous buttons when I click it and shows me others buttons.

work with states in your draw() function...
if (state == 1) drawButtonSet(1);
else if (state ==2) drawButtonSet(2);
etc...
On button click you change the state.

It does not work. Could you be more specific, please?

Please show us what you have tried in order to incorporate states into your code.

PImage img;
PImage studio;
PImage story;
PImage year1;
PImage studioc;
PImage storyc;
PImage yearc;
PImage background;


void setup(){
  size (850,638);
  background(0);
  img=loadImage("cortinaanimationfilms2.jpg");
  image(img,0,0);

 
  studio=loadImage("studio2.jpg");
  story=loadImage("story2.jpg");
  year1=loadImage("year2.jpg");
  studioc=loadImage("studiocortina.jpg");
  storyc=loadImage("storycortina.jpg");
  yearc=loadImage("yearcortina.jpg");
  background= img;

  }
 
  void draw(){
    image(studioc,0,0,width,height);
    image(storyc,0,0,width,height);
    image(yearc,0,0,width,height);
    image(background,0,0,width,height);
    image(studio,200,500,100,80);
    image(story,400,500,100,80);
    image(year1,600,500,100,80);
   
if (state == 1) drawButtonSet(studio);
else if (state ==2) drawButtonSet(story);
else if (state ==3) drawButtonSet(year1);
}

  void mousePressed(){
    if(mouseX>200 && mouseX <300 && mouseY>500 && mouseY <580){
      background=studioc;
      } else if(mouseX > 400 && mouseX < 500 && mouseY > 500 && mouseY < 580){
      background = storyc;
  } else if (mouseX > 600 && mouseX < 700 && mouseY >500 && mouseY < 580) {
      background = yearc;
  }
}

Cannot find anything named 'state'


I'm really noob. I don't know what to do here.

state is not a built-in variable name, it is one you can create yourself at the global level (before startup()):
int state;

Moreover, you must change its value when you want to... change state, eg. when you click on a button or similar action.