java - How can I build map with region selection? -

i trying build map consist of regions(states) , when mouse entered region, need handle it. have many png images represent each region separately. blend images , got want, i can't handle region.
for instance:
it's first region img

second region img

result got:

code:

@override public void start(stage primarystage) throws exception {     fxmlloader loader = new fxmlloader();     loader.setlocation(getclass().getresource("view/mapview.fxml"));     pane root = loader.load();     primarystage.settitle("map");     primarystage.setscene(new scene(root, 700, 700));     primarystage.show();     //first region     file file = new file("src/res/img/region1.png");     canvas canvas = new canvas(700, 700);     canvas.addeventhandler(mouseevent.mouse_entered_target, event -> system.out.println("region 1"));     graphicscontext graphicscontext = canvas.getgraphicscontext2d();     graphicscontext.drawimage(new image(file.touri().tostring()), 0, 0);     root.getchildren().add(canvas);     //second region     file = new file("src/res/img/region2.png");     canvas = new canvas(700, 700);     canvas.addeventhandler(mouseevent.mouse_entered_target, event -> system.out.println("region 2"));     graphicscontext = canvas.getgraphicscontext2d();     graphicscontext.drawimage(new image(file.touri().tostring()), 0, 0);     root.getchildren().add(canvas); } 

in console got "region 2".
please give me tips research. in advance!

you can use imageview , setpickonbounds that.

example code:

import javafx.application.application; import javafx.scene.scene; import javafx.scene.image.image; import javafx.scene.image.imageview; import javafx.scene.layout.pane; import javafx.scene.layout.stackpane; import javafx.stage.stage;  public class layerswithmouseevents extends application {      @override     public void start(stage primarystage) {          // root         stackpane root = new stackpane();          // create layers         pane region1layer = new pane();         pane region2layer = new pane();          // add layers         root.getchildren().addall(region1layer, region2layer);          // load images         imageview region1imageview = new imageview( new image( getclass().getresource("region1.png").toexternalform()));         imageview region2imageview = new imageview( new image( getclass().getresource("region2.png").toexternalform()));          // add images         region1layer.getchildren().add(region1imageview);         region2layer.getchildren().add(region2imageview);          // mouse handler         region1layer.setonmousepressed(e -> system.out.println("region 1: " + e));         region2layer.setonmousepressed(e -> system.out.println("region 2: " + e));          // magic allows click on separate layers, only(!) long layer transparent         region1layer.setpickonbounds(false);         region2layer.setpickonbounds(false);          primarystage.setscene(new scene(root, 800, 600));         primarystage.show();      }      public static void main(string[] args) {         launch(args);     } } 

in future please create mcve focus on complete. nobody wants waste time in order make incomplete example work.