RichoSoft Web Tools

Home Testimonials
Special Feature Software
- Free RichoSoft Software- AlphaBettie for Kids
- Premium Software - 3rd Party Software
- GiveAway Of The Day - About Software
Web Tools WebPlus 4T
- Site Templates- Premium Templates
- Cookie Templates - System Templates
- Contact Forms - Slide Out Players
- Tips and Tricks- How Tos
Latest News Design
Programming Tools Useful Links
Environment Live Support
Contact RichoSoft Site Map
Projects

Software and Services at Affordable Prices

Home Testimonials Software Web Tools WebPlus 4T Feature News Contact more

Buy me a beer and help
Me ADD more FREE
Content.

Find out more about RichoSoft Software

All my Software is verified AdWare, SpyWare and Virus Free find out more here

RichoSoft Software - Affordable and Easy To Use

Find out more here....

Promote a Page, Product or other item on your site with a Page Peel. What is a Page Peel? Slide your mouse over the top right corner of this page to see an example.

Original tip courtesy of serifaddons.com. Visit serifaddons Java Script by jquery.com

How to install:

Create two images (the peel image and the message image.) samples at bottom of this page.

Paste the following code to the <head> section of your page:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 
//Page Flip on hover
 
	$("#pageflip").hover(function() {
		$("#pageflip img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		$("#pageflip img").stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
		$(".msg_block").stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	});
 
	
});
</script> 
<style type="text/css"> 
#pageflip {
	position: relative;
	right: 0; top: 0;
	float: right;
	z-index: 1000; 
}
#pageflip img {
    width: 50px; height: 52px;
    border: none;
    z-index: 1000;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(message.png) no-repeat right top;
}
</style>

Replace message.png with the name of your message image.

Then paste the following code to the <body> section of your page, directly after the <body> tag.

<div id="pageflip">
		<a href="http://yoursite.com/index.html"><img src="page_flip.png" alt=""></a>
		<div class="msg_block"></div>
</div>

Replace page_flip.png with the name of your flip image.

Replace yoursite.com/index.html with the page on your site to link to.

Upload your 2 images to the same folder as your web page on your web server.

Sample m e ssage image

Sample flip image

Page Peel