Remplacement d'une image au survol de la souris par autre chose qu'une image

Dans l'exemple suivant on insere un cercle au milieu du Rectangle, on peut remplacer Circle{} par n'importe quel objet qui dérive de la classe Node;
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
def NB_ITEM = 3;
var tms: Timeline[] = for (n in [0..<NB_ITEM]) Timeline{};
var groups: Group[];
var rects: Rectangle[];
Stage {
    title : "Carrés magiques"
    scene: Scene {
        width: 480
        height: 200
        content: [
            groups = for (n in [0..<NB_ITEM])
            Group {
 
                content: [
                    rects[n] = Rectangle {
                        fill: Color.rgb(
                        Math.random()*255,
                        Math.random()*255,
                        Math.random()*255)
                        translateX: 50+n*130
                        translateY: 50
                        width: 100
                        height: 100
                        onMouseEntered: function (e: MouseEvent): Void {
                            def _rect = rects[n];
                            _rect.toFront();
                            if(tms[n] != null and tms[n].running) {
                                tms[n].stop();
                            }
                            tms[n] = Timeline {
                                keyFrames: [
                                    KeyFrame {
                                        time: 0s
                                        action: function(): Void {
                                            insert Circle {
                                                radius: 20
                                                centerX: rects[n].width/2+rects[n].translateX
                                                centerY: rects[n].height/2+rects[n].translateY
                                            } into groups[n].content;
                                        }
                                    }
                                    KeyFrame {
                                        time: .3s
                                        values: [
                                            _rect.scaleX => 1.5 tween Interpolator.EASEOUT,
                                            _rect.scaleY => 1.5 tween Interpolator.EASEOUT
                                        ]
                                    }
 
                                ]
                            }
                            tms[n].playFromStart();
                        }
                        onMouseExited: function (e: MouseEvent): Void {
                            def _rect = rects[n];
                            if(tms[n] != null and tms[n].running) {
                                tms[n].stop();
                            }
                            tms[n] = Timeline {
                                keyFrames: [
 
                                    KeyFrame {
                                        time: .1s
                                        values: [
                                            _rect.scaleX => 1. tween Interpolator.LINEAR,
                                            _rect.scaleY => 1. tween Interpolator.LINEAR
                                        ]
                                        action: function(): Void {
                                            if(sizeof groups[n].content > 1) {
                                                delete groups[n].content[1]
                                            }
                                        }
 
                                    }
                                ]
                            }
                            tms[n].playFromStart();
                        }
                    }
                 ]
            }
        ]
    }
}