pic_clicked.js
function pic_clicked() {
  g_n++;
  if (g_n>g_pics) g_n=1;
  for (var id=0;id<30;id++) {
    var el=document.getElementById(id);
    el.style.backgroundImage= "url(images/"+g_n+".jpg)";
  }
  Show_class('piece');
  scramble();
  Hide('pic');
}
a job well done

I think you'll agree that we've ended up with a very playable jigsaw - I even enjoy solving them myself! I keep adding new pictures and, at the time of writing, I have 19!

Most of my images came from the Internet.

Then I convert them to 936px x 696px with a 2px black border and a 10px white border.

Footnote

You may have noticed how the same property has a slightly different name in CSS and JavaScript. For example, background-color (CSS) and backgroundColor (JavaScript). There is a simple explanation. JavaScript would interpret the dash as a minus so the convention was adopted that dropped the dash and capitalised the next letter. The result is an example of camel case eg gridColumnStart.