Change icon on mouse over - javafx

Question

I want to create button which changes the default picture when I move mouse over. I made this example but it's not working properly:
public class MainApp extends Application
{
#Override
public void start(Stage stage) throws Exception
{
StackPane bp = new StackPane();
bp.getChildren().add(ReportsIcon());
bp.setPrefSize(600, 600);
Scene scene = new Scene(bp);
scene.setFill(Color.ANTIQUEWHITE);
stage.setTitle("JavaFX and Maven");
stage.setScene(scene);
stage.show();
}
private static final ImageView ReportsFirstIcon;
static
{
ReportsFirstIcon = new ImageView(MainApp.class.getResource("/images/monitoring-colour.png").toExternalForm());
}
private static final ImageView RportsIconsSecond;
static
{
RportsIconsSecond = new ImageView(MainApp.class.getResource("/images/monitoring-green.png").toExternalForm());
}
private HBox ReportsIcon()
{
HBox bpi = new HBox();
bpi.setAlignment(Pos.CENTER);
// Add Label to the Icon
Text inftx = new Text("Reports");
inftx.setFont(Font.font("Verdana", FontWeight.NORMAL, 13)); // Set font and font size
inftx.setFill(Color.BLACK); // Set font color
// Zoom into the picture and display only selected area
Rectangle2D viewportRect = new Rectangle2D(0, 0, 0, 0);
ReportsFirstIcon.setViewport(viewportRect);
BorderPane pp = new BorderPane();
pp.setCenter(ReportsFirstIcon);
bpi.getChildren().addAll(pp, inftx);
bpi.setOnMouseEntered(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent t)
{
pp.setCenter(ReportsFirstIcon);
}
});
bpi.setOnMouseExited(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent t)
{
pp.setCenter(RportsIconsSecond);
}
});
bpi.setOnMouseClicked(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent t)
{
// Open new window
}
});
return bpi;
}
private HBox mouseOver(final HBox bp)
{
bp.setOnMouseEntered(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent t)
{
bp.setStyle("-fx-background-color: linear-gradient(#f2f2f2, #f2f2f2);"
+ " -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
+ " -fx-background-radius: 3px, 3px, 2px, 1px;");
}
});
bp.setOnMouseExited(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent t)
{
bp.setStyle("-fx-background-color: linear-gradient(#f2f2f2, #d4d4d4);"
+ " -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
+ " -fx-background-radius: 3px, 3px, 2px, 1px;");
}
});
return bp;
}
public static void main(String[] args)
{
launch(args);
}
}
Now the code in not working properly the original image is not returned back when I move the mouse outside of the Second BorderPane which is used to hold the picture.
Picture is changed when I move the mouse outside of the stage. Any ideas how to fix this?
I want to show by default the first picture and when I move the mouse over it to replace it with the second. When I move the mouse outside I want to restore the original picture.

Answer 1

Solution Approach
You can bind the button's graphic property to an appropriate ImageView based upon the button's hover property.
button.graphicProperty().bind(
Bindings.when(
button.hoverProperty()
)
.then(meatView)
.otherwise(lambView)
);
Unhovered:
Hovered:
Executable Sample
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.scene.text.*;
import javafx.stage.Stage;
public class MuttonMorph extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
ImageView lambView = new ImageView(
new Image(
lambLoc
)
);
ImageView meatView = new ImageView(
new Image(
meatLoc
)
);
Button button = new Button("Lamb,\nit's what's for dinner");
button.setContentDisplay(ContentDisplay.TOP);
button.setTextAlignment(TextAlignment.CENTER);
button.setFont(Font.font(16));
button.graphicProperty().bind(
Bindings.when(
button.hoverProperty()
)
.then(meatView)
.otherwise(lambView)
);
StackPane layout = new StackPane(button);
layout.setPadding(new Insets(30));
stage.setScene(new Scene(layout));
stage.show();
}
// Icons are Linkware (Backlink to http://icons8.com required)
private static final String lambLoc = "http://icons.iconarchive.com/icons/icons8/ios7/96/Animals-Sheep-icon.png";
private static final String meatLoc = "http://icons.iconarchive.com/icons/icons8/ios7/96/Food-Lamb-Rack-icon.png";
}
Alternate Approach
You could probably do a similar thing without a binding by setting by defining appropriate CSS style rules based on the button's :hover CSS pseudo-class and -fx-graphic attribute.