Raphaelist_vol34(data)

Raphael de SVG ! vol34

by nekosmash

HTML

<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>

CSS

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;
}

JavaScript

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"});
    }
};