Sami's Site: Extras and Fun Stuff
previous    

Index   ·   Multiple Floating images   ·   Floating image - animated   ·   Falling image - Leaves or Snow   ·   Curled Corner Ad: Pageear

Curled Corner Ad: Pageear
This simple free script allows you to put a curling page corner on your web page, in the top left or top right.
Use it to place an ad, a message to your visitors, a cartoon, anything you fancy.  The under image is linkable and is reflected on the foldover using flash coding but YOU do not have to make the flash!  This project is very simple yet gives a complicated look!
License allows for personal and commercial use, when you give a link BACK to the script creator and keep license notice in the script!

I have broken the script into pieces to better explain elements of it for better understanding.  
Please note that I have written this tutorial with the expectation that you will be uploading your files to your website using an FTP program or your website's control panel, etc.  This is tutorial is NOT written to upload the files using CSB.

1)   Download the script.   The original idea and free Pageear script come from this German website. The script is in both german and english.  Simple instructions are given on that page.  I give more details on this page.  Scroll down on that page to download the script from the original website. It is in a zip file.   I used version 1.4 for this sample.

2)   Extract the files from the zip.  You will need to edit them.

3)   Create 2 images in jpg format.  (NO GIF or PNG).
500x500 pixels.  This is the image that is seen when you mouse over the corner.  Use the template that fits the corner you want to curl.
Right click to download and save if you want either image for samples.

This sample image was used for this page, with a LEFT corner.     

This sample image is prepared for a RIGHT corner.     
Right corner curling:  flip the image horizontally

100x100pixels. This image is used to tease the corner.   Take your large image and CROP a 100x100 corner from it.    NOTE:  If you add tiny text into the corner, it can be seen before you mouse over the curl.
    

4)   Edit the file pageear.js using any text editor.  Change the location where you want your click on the ad to send your visitor and the location (url) of the swf flash files and the jpg images  Put your website address in front of the jpg and swf images.   There are other options that you can define.  Change false to true to play music, etc.

Note: If you are putting the files into a specific folder on your website, then put that into the address also. If you are placing the files into a folder called script, then your address should reflect that as shown in this example:

// URL zum kleinen Bild / URL to small image
var pagearSmallImg = 'http://www.yourdomain.com/script/pageear_s.jpg';
// URL zu pageear_s.swf / URL to small pageear swf
var pagearSmallSwf = 'http://www.yourdomain.com/script/pageear_s.swf';

// URL zum großen Bild / URL to big image
var pagearBigImg = 'http://www.yourdomain.com/script/pageear_b.jpg';
// URL zu pageear_b.swf / URL to big pageear swf
var pagearBigSwf = 'http://www.yourdomain.com/script/pageear_b.swf';

// Zu öffnende URL bei klick auf die geöffnete Ecke
// URL to open on pageear click
var jumpTo = 'http://www.forum.samisite.com'

5)   Upload your files to your website.  Use FTP software or even the control panel if your host offers this choice.   


#6 and #7 are shown differently here than on the original site.  
I could not get their web page code to work as they show it.  But the following DOES work!  
I studied the code used by Xara.com when they used this free script to advertise a sale and decided a tutorial was necessary to show how I got it working.

6)   Capture and tweak this code:
Change the location of the files.  Put your website address in front of the js files in the code.

To capture the code, press Select All then COPY the contents.
Using CSB or Trellix:  use an INSERT HTML box to hold your code snippit. Place into the TOP of your webpage. You will NOT use the webcomponents feature to upload the files to your website.
Using CSB 5 or some other web building program:  place code into the HEAD section of your web page.  Note: This script WILL work even if you do not put the code into the head!
Select All
<script src="http://www.yourdomain.com/script/AC_OETags.js" type="text/javascript">
</script>
<script src="http://www.yourdomain.com/script/pageear.js" type="text/javascript">
</script>


7)   Capture and tweak this code:
Change the location of the files.  Again, put your website address in the code again.  
And identify the page address where you have linked your ad.
Place this code at the very BOTTOM of your page.
Using CSB or Trellix:  use an INSERT HTML box to hold your code snippit.

To capture the code, press Select All then COPY the contents.
Select All
<script src="http://www.yourdomain.com/script/AC_OETags.js" language="javascript"></script>
<script>
var openOnLoad = 2;
var jumpTo =
'http://www.yourdomain.com/yourlinkedpage.htm';
var pagearSmallImg = 'http://www.yourdomain.com/script/pageear_s.jpg';
var pagearSmallSwf = 'http://www.yourdomain.com/script/pageear_s.swf';
var pagearBigImg = 'http://www.yourdomain.com/script/pageear_b.jpg';
var pagearBigSwf = 'http://www.yourdomain.com/script/pageear_b.swf';
</script>    
<script src="http://www.yourdomain.com/script/pageear.js" type="text/javascript"></script>
<script type="text/javascript">writeObjects();</script>



8)   Publish your page and check out your curling page.