//STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENT



var wdmax=120;          //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 = parent.document.getElementById("search_button").getAttribute("width");

  wd = wd - inc;

  parent.document.getElementById("search_button").setAttribute("width",wd);

  if (wd==wdmin) {

   //parent.document.getElementById("search_button").setAttribute("src","pic2.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 = parent.document.getElementById("search_button").getAttribute("height");

  ht = ht - inc;

  parent.document.getElementById("search_button").setAttribute("height",ht);

  if (ht==wdmin) {

   //parent.document.getElementById("search_button").setAttribute("src","pic1.gif"); //substitute name of your first picture

   inc=-inc;

   }

  if (ht==wdmax) {

   ff="flip";

   inc=-inc;

   setTimeout("flipflop()",pause);

   }

   else {

   setTimeout("flipflop()",rate);

   }

  }

}