Chapter 3: Mouseovers

JavaScript

var paper = new Raphael(0, 0, 500, 500);

var square = paper.rect(200, 10, 50, 70).attr("fill", "steelblue");
var circle = paper.circle(120, 110, 25).attr("fill", "yellow");
var ellipse = paper.ellipse(60, 150, 30, 15).attr("fill", "orange");

var stuff = paper.set();
stuff.push(square, circle, ellipse);

var label = paper.text(10, 10, "Mouse over an object").attr("text-anchor", "start");

stuff.mouseover(function(e) {
    label.attr("text", this.attr("fill"));
}).mouseout(function(e) {
    label.attr("text", "Mouse over an object");
});
stuff.mouseover(function(e) 
{ label.attr({
    text: this.attr("fill"),
    x:e.clientX,
    y:e.clientY
    })
; });

stuff.mouseover(function(e) { label.attr("text", this.attr("fill"));
}).mousemove(function(e) { label.attr({
            x: e.clientX + 10,
            y: e.clientY
        });
}).mouseout(function(e) { label.attr({
            x: 10,
            y: 10,
            text: "Mouse over an object"
}); });