sastgroup.com - Tutorials guide scripts web tool

CODICE XHTML

 
<div id="page-flip">
	<a href="http://www.sastgroup.com/feed"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a>
<div id="page-flip-message"></div>
</div>
 

CODICE CSS

 
#page-flip { position:relative; right:0; top:0; float:right;  }
#page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; }
#page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; }
 

CODICE MOOTOOLS

 
(function($,$$) { window.addEvent('domready',function() {
 
	var flip = $('page-flip');
	var flipImage = $('page-flip-image');
	var flipMessage = $('page-flip-message');
 
	flip.addEvents({
		mouseenter:function() {
			$$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({
				width: 307,
				height: 319
			});
		},
		mouseleave:function() {
			flipImage.set('morph',{ duration: 220 }).morph({
				width: 50,
				height: 52
			});
			flipMessage.set('morph',{ duration:200 }).morph({
				width: 50,
				height:50
			});
		}
	});
}); })(document.id,$$);