How to change the image of Imageview on MouseClick

Question

i am creating an application in javafx using scene builder. i have an imageview and i want to change the image when someone clicks on it. i have added a mouse event to the image view but it's not changing the image when i click on it. please find below the code for the same.

 public class HomeScreenController implements Initializable {
        @FXML
        public ImageView updateproject;
            public String updateprojectstyle="-fx-image:url(\"../../../../Images/update-enable.png\");";
        }
        @FXML
        private void updateProject(MouseEvent event) throws IOException
        {
            System.out.println("hello");
            updateproject.setStyle(updateprojectstyle);
        }
        @Override
        public void initialize(URL location, ResourceBundle resources) {
             //To change body of generated methods, choose Tools | Templates.
        }
    }

Updated Question (MCVE)

My FXML looks like:

 <VBox prefHeight="658.0" prefWidth="162.0" styleClass="sidepanel" BorderPane.alignment="CENTER">
               <children>
                  <Pane maxHeight="138.0" maxWidth="162.0" prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <ImageView fx:id="addproject" fitHeight="60.0" fitWidth="66.0" layoutX="48.0" layoutY="39.0" pickOnBounds="true" preserveRatio="true" styleClass="addproject-img" />
                     </children>
                  </Pane>
                  <Pane maxHeight="138.0" maxWidth="162.0" prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <ImageView fx:id="updateproject" fitHeight="57.0" fitWidth="84.0" layoutX="41.0" layoutY="32.0" onMouseClicked="#updateProject" pickOnBounds="true" preserveRatio="true" styleClass="updateproject-img" />
                     </children>
                  </Pane>
                  <Pane layoutX="10.0" layoutY="148.0" maxHeight="138.0" maxWidth="162.0" prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <ImageView fx:id="deleteproject" fitHeight="59.0" fitWidth="80.0" layoutX="41.0" layoutY="32.0" pickOnBounds="true" preserveRatio="true" styleClass="deleteproject-img" />
                     </children>
                  </Pane>
               </children>
     </VBox>

My Controller looks like:

public class HomeScreenController implements Initializable {
    @FXML
    public ImageView updateproject;
     @FXML
    public ImageView addproject;
      @FXML
    public ImageView deleteproject;
     public String updateprojectstyle="-fx-image:url(\"../../../../Images/update-enable.png\");";
    public String addprojectstyle="-fx-image:url(\"../../../../Images/add-disable.png\");";
 @FXML
    private void updateProject(MouseEvent event) throws IOException
{
    System.out.println("hello");
    updateproject.setStyle(updateprojectstyle);
     addproject.setStyle(addprojectstyle);
}
    @Override
    public void initialize(URL location, ResourceBundle resources) {
         //To change body of generated methods, choose Tools | Templates.
    }

}

My css looks like:

.updateproject-img{
   -fx-image:url("../../../../Images/update-disable1.png");
}
.addproject-img{
     -fx-image:url("../../../../Images/add-active.png");
}
.deleteproject-img{
    -fx-image:url("../../../../Images/delete-disable1.png");
}

i want to disable the add project icon and enable the update project icon when the user clicks on update project image view. click event is firing but it's not loading the image.

Answer 1

Here is a code with the css style on the ImageView.

Images on ImageView are set via -fx-image:url(...) and not via -fx-background-image:url(...), as you have used in your code.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;


public class ChangeImageViewImage extends Application {


    private static final String IMAGE1 = "http://img1.wikia.nocookie.net/__cb20130120032553/dragonball/images/3/32/Chibi-Ichigo-bleach-anime-33253004-332-400.png";
    private static final String IMAGE2 = "https://40.media.tumblr.com/68f246eef26984be8a44e4367cfedd47/tumblr_n3lsszuyj41txcp2ko1_500.jpg";

    @Override
    public void start(Stage primaryStage) throws Exception {
        ImageView imageView = new ImageView();
        imageView.setFitHeight(400);
        imageView.setFitWidth(300);
        imageView.setStyle("-fx-image: url(\""+ IMAGE1 + "\");");

        imageView.setOnMouseClicked(event -> {
            imageView.setStyle("-fx-image: url(\""+ IMAGE2 + "\");");
        });

        Pane pane = new Pane();
        pane.getChildren().add(imageView);

        Scene scene = new Scene(pane, 300, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }
}