Chapter 3: Mouseovers

by Joe LeMonnier

CSS

“circle.dblclick(function() {
    square.unclick(clickHandler);”

Excerpt From
Learning Raphaël JS Vector Graphics
This material may be protected by copyright.

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", "stroke-width":4});
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", e.clientX);
}).click(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"
});
});

function turnMeOrange(e) {
   this.attr("fill", "orange");     
}

function turnMeRed(e) {
   this.attr("fill", "red");     
}




var c=paper.circle(250,200,40).attr("fill", "orange");
c.attr('fill','blue');
c.mouseover(turnMeOrange);
c.mouseout(turnMeRed);