javascript - How do I click on an image change to other image and click to a video -

i'm having problem on processing keypressed/mousepressed.

if example have data file of images apple, dog & cat, 2 videos forest & garden.

the problem want press button , change image , when pressed again change video.

for example start

video = "forest.mp4" > keypressed = > apple.jpg ;

with 2 selection of left or right >

• if keypressed = left > dog.jpg

• if keypressed = right > cat. jpg

both of them keypressed = > video = "garden"

movie mymovie[]; int index = 0; boolean start = false; float t0; //movie begin float t; //current time  void setup(){  size(1280,720);  img = new image[2]; img = new image(this, "apple.jpg"); img = new image(this, "dog.jpg"); img = new image(this, "cat.jpg");  mymovie = new movie[3]; mymovie[0] = new movie(this, "forest.mp4"); mymovie[1] = new movie(this, "garden.mp4"); } void draw(){ image (img, 0 ,0); image(img, 0 ,height, img.height, img, height);  if (mymovie[index].read(); }  if (start){  image(mymovie[index],0,0,width,height); 

this old version of rpg game, adventure type of game.

while player click on different selections appear different results.

step 1: store state in variable.

boolean showingmovie = true; 

step 2: in draw() function, check variable , draw correct thing.

void draw(){    if(showingmovie){       //draw movie    }    else{       //draw image    } } 

step 3: change variable in keypressed() or mousepressed() functions switch thing showing.

void keypressed(){    showingmovie = !showingmovie; } 

you might have have logic reading movie when variable indicates movie playing, , might have add logic switch variable when mouse clicked in correct location, or correct key pressed. might have have multiple variables if have multiple movie/image combinations. if have lot of these, might use array or class hold data.