var wdmax=130;          //set maximum width of square image (px)
var wdmin=0;            //set minimum thickness of edge-on image (px)
var inc=5;              //set step change in px (wdmax-wdmin must be a multiple) )These two variables
var rate = 50;          //pause between steps (in millisec)                      )determine flip-flop speed
var pause = 1000;       //pause between flip and flop (in millisec)
var ff="flip";          //initialise whether movement starts with a "flip" (sideways) or "flop" (vertical) change.
function flipflop() {
if (ff=="flip") {
  var wd = document.getElementById("pic").getAttribute("width");
  wd = wd - inc;
  document.getElementById("pic").setAttribute("width",wd);
  if (wd==wdmin) {
  document.getElementById("pic").setAttribute("src","img/s02.jpg"); //substitute name of your second picture
  inc=-inc;
  }
  if (wd==wdmax) {
  ff="flop";
  inc=-inc;
  setTimeout("flipflop()",pause);
  }
  else {
  setTimeout("flipflop()",rate);
  }
  }
else {
    var ht = document.getElementById("pic").getAttribute("width");
    ht = ht - inc;
    document.getElementById("pic").setAttribute("width",ht);
    if (ht==wdmin) {
    document.getElementById("pic").setAttribute("src","img/s01.jpg"); //substitute name of your first picture
    inc=-inc;
    } 
    if (ht==wdmax) {
    ff="flip";
    inc=-inc;
    setTimeout("flipflop()",pause);
    }
    else {
    setTimeout("flipflop()",rate);
    }
}
}