var rect; var rect2; window.onload = function(){ var paper = Raphael(0,0,"100%","100%"); rect = paper.rect(0,0,100,100) .attr({fill:"#400"}); rect2 = paper.rect(50,50,100,100) .attr({fill:"#808"}); } function hide(){ //紫を後ろに rect2.hide(); } function show(){ //紫を前に rect2.show(); }
<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script> <div id="canvas"> <div class="text"> HIDE/SHOW <input type="button" value="Hide" onclick="hide()" /> <input type="button" value="Show" onclick="show()" /> </div> </div>
body,html { height:100%; margin:0; } #canvas { height:99%; background:#ccc; text-align:center; } .text{ letter-spacing: 20px; color:#fff; font-size:150%; width:60%; height:60%; position:absolute; left:20%; top:40%; z-index:1; }