Page Peel

Buy me a beer and help
keep this site FREE

Members Area

●

Contact

●	Contact Us

●	Support Site

●	Support Forum

●	Report Broken Link

●	Report Site Problem

New Features

●	WebPlus T4

●	Tips & Tricks 2T

Page Peel

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

Sample flip image

Some useful Site Enhancements

Works with:
WebPlus X5
WebPlus X2 & X4
Other HTML Editors

Want your software to be
available on this site?

Members Area

Members Area Register

Software Verification

MyOpera Themes Creator (OCSS)

AlphaBettie for Kids

Tell Game

Mobile Site Builder (Alpha)

X5 Platinum Plus Template Manager

Game Give Away Of The Day

Mini MP3 Player

Multi MP3 Player

fb and twitter buttons

Link Exchange Program

More Web Tools

Self Emptying Text Box

Check Password Entry

Java Snippets Part 2

Validating a Number in a Range

Email Validation

Rotating Testimonials/Quotes

WebPlus 4T - Tools,Tips,Tricks,Templates

More WebPlus X5 T4,Tools,Tips...

Even More WebPlus X5 T4,Tools,Tips...

Yet More WebPlus X5 T4,Tools,Tips...

X5 Mobile Templates

New - X5 Mobile Templates

NEW! X5 Themed Templates

X5 Survey Templates

X5 Premium Survey Templates

X5 The Collector Premium Template

X5 Quotation Premium Template

X5 Magazine Templates

X5 Finance Premium Template

MP3 Player (Single Song)

MP3 Player (Multi Song)

fb and twitter buttons

Rotating Testimonials/Quotes

X5 Platinum Plus Template Manager

Flash Album Maker

Lightboxes Tips

Lightbox and MooTools

Lightbox Open from NavBar

Lightbox Open with Page Load

Restricting Form Text Input

Sliding Contact Forms

Slide Out Contact Form

Mortgage Calculator

2T's - Tips & Tricks Index

Slide Out Contact Form

Sliding Contact Form

Keeping your Computer secure

Think you have Malware?

Remembering Many Strong Passwords

Short URLs

XP Speed up Start menu

Display Hibernate on logoff panel

Stop Windows Messenger auto starting

2 Useful Power Toys

Message box before Login in XP

Notepad Hidden Bug/Trick

Increase your Internet speed

Changing the Support Text and Image

5 Tips to speed up Windows

The Windows Registry

New Facebook Profile

Facebook Activity Buttons

Facebook Like Buttons

Facebook Share Buttons

HTML5 and CSS3 Part 1

Sliding Out Contact Form