When using JavaFX you may often want an image in a scene to be changed to another image when you click on it with the left mouse button. The simplest way to achieve this effect in JavaFX is as follows:

// Declare these variables for access by the scene.

// Image 1

var image1 = Image { url:{__DIR__}images/Image1.png" }

// Image 2

var image1 = Image { url:{__DIR__}images/Image1.png" }

// Declare Temporary variables for storing these images.

var tmpImage1: Image = image1;

var tmpImage2: Image = image2;

// Create the Image View.

ImageView {

                      // Flag denoting whether image2 is being used.

                     var image2Used = false;

                    // Bind the image in this ImageView to image1

                    image: bind image1

                   // Function called in response to the image being clicked by the left mouse button.

                   onMouseClicked:function(e:MouseEvent):Void {

                                // If Image 2 is not being used set the image as Image 2 and set the flag to true. 

                                if(image2Used == false) {

                                             image1 = tmpImage2;

                                           image2Used = true;

                                 }

                                // If Image 2 is being used the image as Image 1 and set the flag to true.

                                else {

                                            image1 = tmpImage1;

                                           image2Used = false;

                             }

                  }

}