var wdmax=380;          //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","images/logo3D2.gif"); //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("height");
  ht = ht - inc;
  document.getElementById("pic").setAttribute("height",ht);
  if (ht==wdmin) {
   document.getElementById("pic").setAttribute("src","images/logo3D.gif"); //substitute name of your first picture
   inc=-inc;
   } 

  }
}