2010-11-23 3rd budl Follow 2010-11-23 23:19:03 License: MIT License Fork0 Fav0 View544 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 51 lines HTML 15 lines CSS 1 lines 2010-11-23 3rd Prototype JavaScript framework, v1.6.1 Event.observe(window , 'load' , function(){ var tm ; $('bu1').observe('click' , function(e){ //alert('click') }) //alert( e.element().tagName ) //var gTux = new Draggable( e.element() ) $('bu1').observe('mouseover' , function(e){ var x = 24 * 3 ; var y = 36 * 0 ; //e.element().setStyle({'backgroundPosition':' -72px '+ ' 0px'}) tm = setInterval( function(){ $('im1').setStyle({'backgroundPosition': '-' + x +'px -'+ y +'px'}) x -= 24 ; y += 36 ; if( x == -24 ){ x = 24 * 3 ; y = 36 * 0 ; } }, 150 ); }); $('bu1').observe('mouseout' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); $('bu1').observe('mousedown' , function(e){ $('im1').setStyle({'backgroundPosition':'-0px -72px'}) clearInterval( tm ) }); $('bu1').observe('mouseup' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); }); <button id='bu1' x=100 style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray' ><table id='im1' cellpadding=0 cellspacing=0 style='width:24px; height:32px ; margin:0px ; padding:0px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> <button id='ii' title='Qw' style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray;border:1px solid gray;border-radius:4px;-moz-border-radius:4px;' onmousedown='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-0px -72px"' onmouseover='if(this.o)return;if(!this.x){this.x=24*3;this.y=36*0;this.c=this.childNodes[0].style;this.p="backgroundPosition";this.onmouseup=this.onmouseout};this.tm=setInterval(function(t){t.c[t.p]="-"+t.x+"px -"+t.y+"px"; t.x-=24;t.y+=36;if(t.x<0){t.x=24*3;t.y=36*0}},150,this)' onmouseout='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-48px 0px"' ondblclick='if(this.o){this.o=false;this.onmouseout();Element.setStyle($(this).childElements()[0],{width:"24px",height:"32px"}); }else{ Element.setStyle( $(this).childElements()[0] , {width:"48px",height:"64px",backgroundPosition:"0px 0px"});this.o=true;}' ><table cellpadding=0 cellspacing=0 style='width:24px;height:32px;margin:1px;padding:1px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> 2010-11-23 3rd body { background-color: #DDDDDD; font: 30px sans-serif; } Event.observe(window , 'load' , function(){ var tm ; $('bu1').observe('click' , function(e){ //alert('click') }) //alert( e.element().tagName ) //var gTux = new Draggable( e.element() ) $('bu1').observe('mouseover' , function(e){ var x = 24 * 3 ; var y = 36 * 0 ; //e.element().setStyle({'backgroundPosition':' -72px '+ ' 0px'}) tm = setInterval( function(){ $('im1').setStyle({'backgroundPosition': '-' + x +'px -'+ y +'px'}) x -= 24 ; y += 36 ; if( x == -24 ){ x = 24 * 3 ; y = 36 * 0 ; } }, 150 ); }); $('bu1').observe('mouseout' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); $('bu1').observe('mousedown' , function(e){ $('im1').setStyle({'backgroundPosition':'-0px -72px'}) clearInterval( tm ) }); $('bu1').observe('mouseup' , function(e){ $('im1').setStyle({'backgroundPosition':'-48px 0px'}) clearInterval( tm ) }); }); <button id='bu1' x=100 style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray' ><table id='im1' cellpadding=0 cellspacing=0 style='width:24px; height:32px ; margin:0px ; padding:0px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> <button id='ii' title='Qw' style='padding:0px;padding-left:12px;background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -35px -108px no-repeat gray;border:1px solid gray;border-radius:4px;-moz-border-radius:4px;' onmousedown='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-0px -72px"' onmouseover='if(this.o)return;if(!this.x){this.x=24*3;this.y=36*0;this.c=this.childNodes[0].style;this.p="backgroundPosition";this.onmouseup=this.onmouseout};this.tm=setInterval(function(t){t.c[t.p]="-"+t.x+"px -"+t.y+"px"; t.x-=24;t.y+=36;if(t.x<0){t.x=24*3;t.y=36*0}},150,this)' onmouseout='if(this.o)return;clearInterval(this.tm);this.c[this.p]="-48px 0px"' ondblclick='if(this.o){this.o=false;this.onmouseout();Element.setStyle($(this).childElements()[0],{width:"24px",height:"32px"}); }else{ Element.setStyle( $(this).childElements()[0] , {width:"48px",height:"64px",backgroundPosition:"0px 0px"});this.o=true;}' ><table cellpadding=0 cellspacing=0 style='width:24px;height:32px;margin:1px;padding:1px; background:url(http://farm5.static.flickr.com/4087/5200054320_35b35b4117_m.jpg) -48px -0px no-repeat' ><tr><td width='24' height='32' style='background-color:transparent' ></table> </button> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/q1T8/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/budl/q1T8" title="2010-11-23 3rd">2010-11-23 3rd - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter
