var paper = new Raphael(document.getElementById('my_container'), 200, 200); var r1 = paper.image( "rabbit.png", 20, 20, 110, 150 ) r1.mousedown( function() { this.attr({ 'transform': 's'+Math.random() }) } )
var paper = new Raphael(document.getElementById('my_container'), 200, 200); var r1 = paper.image( "rabbit.png", 20, 20, 110, 150 ) r1.click( function() { this.attr({ 'transform': 's'+Math.random() }) } )
var paper = new Raphael(document.getElementById('my_container'), 200, 200); var r1 = paper.image( "rabbit.png", 20, 20, 110, 150 ) r1.mouseup( function() { this.attr({ 'transform': 's'+Math.random() }) } )
var paper = new Raphael(document.getElementById('my_container'), 200, 200); var ms = paper.rect( 20, 20, 110, 110, 3 ).attr({ 'fill': 'blue' }) ms.mouseover( function() { this.attr({ 'fill': Raphael.getColor() }) } )
var paper = new Raphael(document.getElementById('my_container'), 200, 200); var ms = paper.rect( 20, 20, 110, 110, 3 ).attr({ 'fill': 'blue' }) ms.mousemove( function() { this.attr({ 'fill': Raphael.getColor() }) } )
var paper = new Raphael(document.getElementById('my_container'), 150, 150); var bg = paper.rect( 0,0,150,150 ).attr({ 'fill': 'white' }) var bc = paper.circle( 75,75,50 ).attr({ 'fill': '#ffffcc', 'stroke-width':0 }) var bcglow = bc.glow({ 'width': 40, 'color':'yellow'}) bcglow.hide() function hoverstart() { bg.animate({'fill':'blue'},500) bc.animate({'fill':'yellow'},500) bcglow.show() } function hoverend() { bg.attr({ 'fill': 'white' }) bc.attr({ 'fill': '#ffffcc' }) bcglow.hide() } bc.hover( hoverstart, hoverend )
var paper = new Raphael(document.getElementById('drag'), 700, 200); var dragC = paper.circle( 20,20,20 ).attr({ 'fill': 'white' }) function dragStart() { // Get original position of element, and set as properties .ox and .oy dragC.ox = dragC.attr("cx"); dragC.oy = dragC.attr("cy"); dragC.animate({ 'transform': 's2', 'fill': 'pink', 'opacity': 0.9 }, 200 ) } function dragMove( dx, dy ) { dragC.attr({ 'transform': 's1.6', 'fill': 'pink', 'opacity': 0.8, 'cx': dragC.ox+dx, 'cy': dragC.oy+dy }) } function dragEnd() { dragC.animate({ 'transform': 's1', 'fill': 'white', 'opacity': 1 }, 500) } dragC.drag( dragMove, dragStart, dragEnd )