The reason that it works on your computer and not in the browser is that you can't refresh Processing, you always start the program from scratch each time you run it.
When you refresh the browser the Applets (you have 2 on the page) are 'torndown' and reload. This is the output from the Java Console in Firefox when your page is refreshed.
Applet Status: Starting applet teardown
Applet Status: Finished applet teardown
Applet Status: Starting applet teardown
Applet Status: Finished applet teardown
Applet Status: Applet loaded.
Applet Status: Applet resized and added to parent container
Applet Status: Applet initialized
Applet Status: Applet made visible
Applet Status: Starting applet
Applet Status: Applet started
Applet Status: Told clients applet is started
Applet Status: Applet loaded.
Applet Status: Applet resized and added to parent container
Applet Status: Applet initialized
Applet Status: Applet made visible
Applet Status: Starting applet
Applet Status: Applet started
Applet Status: Told clients applet is started
From previous experience I suspect that although the Applet is being reloaded it is coming from the browsers file cache rather than the web server. This means that the Applet is restarted but some of the variables are still using their old values.
You could add a
void stop() method to your Applet to clear out the image array and reinitialse all the variables to their starting point.
The stop() method is called when an Applet is ended due to refresh or move to another page.
You might also consider loading all the images in setup() as you only have 7 images the delay on loading would not be that great. This would simplify the coding dramatically.
I don't know if these suggestions will solve the problem but I'll keep my fingers crossed.