This code was written in response to a request for a Toggle Image Button.

The main body of the code is the function

  CreateImageToggle(img1,img2)

The images can be passed either as file-paths or as images The sample code passes one of each.

In case it is not obvious, the actual toggling is done in the OnTouchUp handler.

You could move this to any of the OnTouch events but be aware that some of them (such as SetOnTouch) may fire more often than you expect.

toggle.js

//Called when application is started.
function OnStart(){
    // Create layout
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );    
    
    // Create resized first image for the button
    var pauseImg = app.CreateImage( "/Sys/Img/Droid1.png",0.1,-1);
   
    //Create the button with OnTouchDown event
    btn = CreateImageToggle(pauseImg, "/Sys/Img/Droid2.png" ) ;
    btn.SetOnTouchDown(btnToggle);
    
    lay.AddChild( btn );
    
    //Add layout to app.    
    app.AddLayout( lay );
}
 
function btnToggle(ev){
   this.Toggle = ! this.Toggle;
   if(this.Toggle){
      this.SetImage(this.imgTrue);
      app.ShowPopup("Playing");
   } else{
      this.SetImage(this.imgFalse);
      app.ShowPopup("Paused");
   }
}
 
function CreateImageToggle(img1,img2){
  // accepts images or file-paths
  //img1 represents false, img1 true(toggled)
  if (typeof img1 == "string") {
     img1 = app.CreateImage(img1);
  }
  if (typeof img2 == "undefined"){
    img2 = img1;
  } else if (typeof img2 == "string") {
    img2 = app.CreateImage(img2,img1.GetWidth(),img1.GetHeight());
  }
  var obj = app.CreateImage(null,img1.GetWidth(),img1.GetHeight());
  obj.SetImage(img1)
  obj.Toggle = false;
  obj.imgFalse = img1
  obj.imgTrue = img2
  return obj
}

This code has had only rudimentary testing. You may well be able to improve it