var paper; window.onload = function(){ paper = Raphael(0,0,"100%","100%"); var gradient = "r(0.7,0.7)#f0a-#c05"; for(i=0;i<5;i++){ c =paper.circle($(window).width()/2+i*20, $(window).height()/2, 100) .attr({opacity:.3,fill:gradient,stroke:"none"}); //インデックスをエレメントデータとして保存 c.data("index",i); c.click(c_clicked); } }; function c_clicked(){ if(this.data("index")==3){ this.attr({fill:"#000"}); }else{ this.attr({fill:"#fff"}); } };
<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script> <div id="canvas"> <div class="text"> DATA <div id="result"></div> </div> </div>
body,html { height:100%; margin:0; } #canvas { height:99%; background:#fff; text-align:center; } .text{ letter-spacing: 0px; color:#fff; font-size:150%; position:absolute; text-align:center; top:40%; left:0%; width:100%; z-index:1; background:#000; opacity:0.5; } #result{ font-size:60%; letter-spacing: 5px; } input{ padding:3px; }