Raphael onclick

by considerphlebas

HTML

<section><div id="place">
		</div>
    </section>

CSS

body {
    background: #999;
}
section {
    width: 800px;
    height: 800px;
}
#place {
    height: 100%;
    width: 100%;
}

JavaScript

// node animation

var w = 300;
var h = 300;	
var paper = Raphael("place");
paper.setViewBox(0,0,w,h,true);

	var style = {
		fill: "#555",
		stroke: "#fff",
	 	"stroke-width": 2,
	 	"stroke-linejoin": "round"
	};

	var aus = []
		aus[0] = paper.rect(100,100,100,100).attr(style);
		aus[1] = paper.path("M156.727,116.5L134.914,79l21.813-37.5h43.627L222.167,79l-21.813,37.5H156.727z").attr(style);
		aus[2] = paper.path("M90.727,78.5L68.914,41L90.727,3.5h43.627L156.167,41l-21.813,37.5H90.727z").attr(style);
		aus[3] = paper.path("M90.727,154.5L68.914,117l21.813-37.5h43.627l21.813,37.5l-21.813,37.5H90.727z").attr(style);
	
for(var i in aus) {
    (function (st) {
    	st.node.state = 0;
		st.node.onmouseover = function() {
			st.animate({fill: "#8fbf27", stroke: "#fff"}, 100);
		};
		st.node.onmouseout = function() {
			st.animate({fill: "#555", stroke: "#fff"}, 100);
			if(this.state == 1){
				st.animate({fill: "#fff", stroke: "#fff"}, 100);
			}else {
				st.animate({fill: "#555", stroke: "#fff"}, 100);
			}
		};
    })(aus[i]);

   }