Chess Border around Pawns JavaFX

Question

I am creating a chess game and i am stuck at one thing for a couple of days. So i want to create event when user moves over a figure the image of figure replaces to another image with border and when user moves away the image must return to normal. Here is full code.

Folder for Project is called sample,Folder for images is Called Sprites. Folder for classes is called Figures.I will link the images for black pawn.

package sample;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

import sample.Figures.*;

public class Main extends Application {

@Override
public void start(Stage primaryStage){
    primaryStage.setTitle("ChessGame");
    primaryStage.getIcons().add(new Image("/sample/Chess-icon.png"));
    GridPane root = new GridPane();

    final GridPane group = new GridPane();
    group.setPadding(new Insets(15, 25, 25, 25));

    for (int i = 0 ; i < 8 ; i++) {
        for (int j = 0 ; j < 8 ; j++) {
            Rectangle rectangle = new Rectangle( 50, 50);
            if(j % 2 == 0 && (i % 2 == 0)) {
                rectangle.setFill(Color.BEIGE);
            }
            else if(!((j + 2) % 2 == 0) && !((i + 2) % 2 == 0)) {
                rectangle.setFill(Color.BEIGE);
            }
            else {
                rectangle.setFill(Color.GRAY);
            }
            group.add(rectangle,i,j);
        }
    }

    //FIGURES
    //Black
    //Pawns
    final blackPawn BlackP_1 = new blackPawn(0,1,64,65);
    group.add(BlackP_1.IMG,BlackP_1.x,BlackP_1.y);

    BlackP_1.IMG.setOnMouseEntered(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            group.getChildren().remove(64,65);
            group.add(BlackP_1.IMGglow,0,1);
        }
    });



    BlackP_1.IMGglow.setOnMouseExited(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            group.getChildren().remove(64,65);
            group.add(BlackP_1.IMG,BlackP_1.x,BlackP_1.y);
        }
    });

    blackPawn BlackP_2 = new blackPawn(1,1);
    group.add(BlackP_2.IMG,BlackP_2.x,BlackP_2.y);
    blackPawn BlackP_3 = new blackPawn(2,1);
    group.add(BlackP_3.IMG,BlackP_3.x,BlackP_3.y);
    blackPawn BlackP_4 = new blackPawn(3,1);
    group.add(BlackP_4.IMG,BlackP_4.x,BlackP_4.y);
    blackPawn BlackP_5 = new blackPawn(4,1);
    group.add(BlackP_5.IMG,BlackP_5.x,BlackP_5.y);
    blackPawn BlackP_6 = new blackPawn(5,1);
    group.add(BlackP_6.IMG,BlackP_6.x,BlackP_6.y);
    blackPawn BlackP_7 = new blackPawn(6,1);
    group.add(BlackP_7.IMG,BlackP_7.x,BlackP_7.y);
    blackPawn BlackP_8 = new blackPawn(7,1);
    group.add(BlackP_8.IMG,BlackP_8.x,BlackP_8.y);

    //Rooks
    blackRook BlackR_1 = new blackRook();
    group.add(BlackR_1.IMG,7,0);
    blackRook BlackR_2 = new blackRook();
    group.add(BlackR_2.IMG,0,0);
    //Knights
    blackKnight BlackK_1 = new blackKnight();
    group.add(BlackK_1.IMG,1,0);
    blackKnight BlackK_2 = new blackKnight();
    group.add(BlackK_2.IMG,6,0);
    //Bishop
    blackBishop BlackB_1 = new blackBishop();
    group.add(BlackE_1.IMG,2,0);
    blackBishop BlackB_2 = new blackBishop();
    group.add(BlackE_2.IMG,5,0);
    //Queen
    blackQueen blackQueen= new blackQueen();
    group.add(blackQueen.IMG,3,0);
    //King
    blackKing blackking = new blackKing();
    group.add(blackking.IMG,4,0);

    //WHITE
    //Pawns
    final whitePawn WhiteP_1 = new whitePawn();
    group.add(WhiteP_1.IMG,0,6);
    whitePawn WhiteP_2 = new whitePawn();
    group.add(WhiteP_2.IMG,1,6);
    whitePawn WhiteP_3 = new whitePawn();
    group.add(WhiteP_3.IMG,2,6);
    whitePawn WhiteP_4 = new whitePawn();
    group.add(WhiteP_4.IMG,3,6);
    whitePawn WhiteP_5 = new whitePawn();
    group.add(WhiteP_5.IMG,4,6);
    whitePawn WhiteP_6 = new whitePawn();
    group.add(WhiteP_6.IMG,5,6);
    whitePawn WhiteP_7 = new whitePawn();
    group.add(WhiteP_7.IMG,6,6);
    whitePawn WhiteP_8 = new whitePawn();
    group.add(WhiteP_8.IMG,7,6);
    //Rooks
    whiteRook WhiteR_1 = new whiteRook();
    group.add(WhiteR_1.IMG,0,7);
    whiteRook WhiteR_2 = new whiteRook();
    group.add(WhiteR_2.IMG,7,7);
    //Knights
    whiteKnight WhiteK_1 = new whiteKnight();
    group.add(WhiteK_1.IMG,1,7);
    whiteKnight WhiteK_2 = new whiteKnight();
    group.add(WhiteK_2.IMG,6,7);
    //Bishop
    whiteBishop WhiteB_1 = new whiteBishop();
    group.add(WhiteB_1.IMG,2,7);
    whiteBishop WhiteB_2 = new whiteBishop();
    group.add(WhiteB_2.IMG,5,7);
    //Queen
    whiteQueen whitequeen = new whiteQueen();
    group.add(whitequeen.IMG,3,7);
    //King
    whiteKing whiteking = new whiteKing();
    group.add(whiteking.IMG,4,7);

    root.getChildren().add(group);
    root.setStyle("-fx-background-color: #C1D1E8;");

    Scene scene = new Scene(root, 450, 440);

    primaryStage.setScene(scene);
    primaryStage.show();
}


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

Black Pawn Class

package sample.Figures;

import javafx.scene.image.ImageView;

public class blackPawn {

    public int x;
    public int y;
    public int start;
    public int end;
    public ImageView IMG = new ImageView("sample/Sprites/blackPawn.png");
    public ImageView IMGglow = new ImageView("sample/Sprites/blackPawnStroke.png");

    public blackPawn(int x,int y)
    {
        this.x = x;
        this.y = y;
    }

    public blackPawn(int x,int y,int start,int end)
    {
        this.x = x;
        this.y = y;
        this.start = start;
        this.end = end;
    }
}

Answer 1

It's quite easy to change the Image of an ImageView just by calling the setImage(). There are two ways to make the transition from one state to another. The first approach is programmatically through setOnMouseEntered() and setOnMouseExited() here is an example :

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class HoverableImage extends Application {

    @Override
    public void start(Stage stage) throws Exception {

        ImageView imageView = createChestImage();

        FlowPane pane = new FlowPane();
        pane.setAlignment(Pos.CENTER);
        pane.getChildren().add(imageView);

        stage.setScene(new Scene(pane, 100, 100));
        stage.show();
    }

    private ImageView createChestImage() {
        ImageView iv = new ImageView(new Image("https://i.stack.imgur.com/rd71Q.png"));

        iv.setOnMouseEntered(e->{
            iv.setImage(new Image("https://i.stack.imgur.com/7JU7r.png"));
        });

        iv.setOnMouseExited(e->{
            iv.setImage(new Image("https://i.stack.imgur.com/rd71Q.png"));
        });

        return iv;
    }

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

}

The second approach would be to do that using CSS, you can set each chest piece an ID (for example : iv.setID("SoldierPiece"); ) and then apply those CSS rules on it :

#SoldierPiece{
    -fx-image: url("https://i.stack.imgur.com/rd71Q.png");
}

#SoldierPiece:hover{
    -fx-image: url("https://i.stack.imgur.com/7JU7r.png");
}