Have you ever hunted for easter eggs? Not the "laid by a chicken" kind; we're talking about unexpected pleasant surprises, planted by the author -- perhaps a message, an image, or a sound, providing a little treat when you discover them.
Easter eggs exist in computer programs, movies, books, and other creative works. Today's article will discuss web page easter eggs and how to create them.
Easter eggs are revealed by a secret combination of keystrokes, commands and/or mouse clicks. There might even be an easter egg within an easter egg.
For inspiration or better understanding of what easter eggs are, http://eggheaven2000.com/Website_Eggs has a list of web pages that contain easter eggs and how to find them.
Our own Web Page Easter Egg Directory is fresh and new. We encourage you to submit your easter egg when it's ready for visitors. See http://willmaster.com/easteregg
If an easter egg on a web page catches on or "goes viral", it could mean a lot of visitors to that page.
An easter egg by definition is hidden behind a certain sequence of keyboard and/or mouse actions. Yet, if it is to go viral, some people must know it exists and those people must tell their friends.
Make it easy to recommend the page with the easter egg, for there may not be enough motivation to carry the visitor through the extra step of manually launching an email program.
An obvious yet discreet link and/or form can be the "easy" that gets action.
You know someone who would like this, right? <a href="mailto:_Replace_This_?bcc=_Replace_This_">Click here to use your email program</a> or use the form below.
Clicking on a link like the above opens the visitors own email program with a blank email that has "_Replace_This_" inserted in both the To and the Bcc header lines.
A form near the easter egg or one launched by a link can use any one of a number of "recommend this site" programs available on the Internet. Two such programs, both written by yours truly, are described at http://willmaster.com/a/25t/pl.pl?mr and http://willmaster.com/a/25t/pl.pl?mrp
So let's create something fun for your visitors to discover.
The easter egg can represent anything your fertile imagination can conceive of. Here are a few ideas.
"this day in history..." info items, and jokes are all candidates for this type of easter egg.
(Check the "Instant Info" and "'Fast Info' For Your Visitors" articles for instructions how to do this.
Amusing or provocative pictures.
- Off-the-wall philosophical comments.
- Games with certain answers uncovering a second easter egg.
- Fun musical interludes.
- Your own voice cracking jokes or imitating a celebrity.
NOTE: This article contains many references to other articles, all are in this ezine's archives. See http://willmaster.com/possibilities/archives/index2.shtml
Whether or not this type of easter egg will go viral probably depends in large part on how clever you are.
To require a sequence of mouse moves before the easter egg is revealed, a counter might be incremented whenever the mouse moves over images in the correct sequence. If image1 is the first in the sequence, then image2 and image 3, the counter would be incremented at image2 only if the counter has already been incremented at image1. And the easter egg would display only if the counter has already been implemented at image2.
A ZIP file with example code for this method is at http://willmaster.com/possibilities/demo/easteregg1.zip
The above method can be adapted for use with other types of easter egg presentations -- popup, IFRAME, layer, redirect, image, and others discussed in this article.
The popup might be timed, requiring a click in a certain place to reveal the rest of the easter egg. Code that can be modified to accomplish that is presented in the article, "Quick! Click the Button!"
If you're uncertain about how to make popups, see the "Popup Basics" and "Integrated Popups" articles in the archives. Using the integrated popup method would almost always be the fastest launch.
Easter eggs can also be hidden behind certain page events, revealing themselves only after a browser window is moved or resized, as examples. The article "Automatic Page Events" presents some page events that might be used for this purpose.
An IFRAME tag can be used to conceal and present an easter egg. The IFRAME might have no borders or margins to conceal the fact that it is an IFRAME. The web page in the IFRAME can blend in with the rest of the main web page, the page within which it is displayed.
The page within the IFRAME would contain all the code that hides the easter egg, and the easter egg would be displayed within the IFRAME.
The IFRAME can contain a sequence of pages, including slide shows. "Easy IFRAME Slide Show" might be adapted to your needs.
Popup and IFRAME easter eggs are ideal methods of presenting easter eggs while allowing the browser to remain at the web page it is at. Stories, musical scores, games, movies, forms, and image changes can all be used in both popup and IFRAME.
Of course, what can be presented in a popup and IFRAME can also be presented in a normal browser window. If your easter egg is best presented in a normal window, several methods exist to load the easter egg web page.
If the image is a form submit image, the click can be sent to a Perl CGI script. The script can determine what part of the image was clicked. When a certain section of the image is clicked, the easter egg page is delivered; otherwise the expected page is delivered.
An image can both hide an easter egg and be an easter egg. When the mouse moves over the image, an image rollover reveals the hidden easter egg. "Easy Mouseover Images For Your Site" might be of assistance when implementing this type of easter egg.
The rollover might reveal an easter egg within an image map. See
"Image Map Triggered Image Rollovers" for hints on how to accomplish that.
Another way to present an easter egg is with the use of HTML layers. When the easter egg is uncovered, the layer becomes visible.
The three-part "No Kill PopBox ..." article can provide code to implement a layer easter egg.
If popup blockers are a concern, consider presenting easter eggs in a layer or in an IFRAME tag.
An easter egg is an unexpected surprise, hidden in the web page. Consider what a surprise it would be if some text on the web page suddenly began to grow. "Expanding Text" can provide the code for that. The text might be tiny on the page until the easter egg happens to be uncovered, then grow to huge proportions.
document.FormName.TextareaFieldName.value = "new content";
"Form Submissions Without Submit Buttons" presents a way to automatically submit a form. This idea might be used to present an easter egg in the form of an automatic search on Google, for example, when the mouse hovers over a certain area of the web page.
Another easter egg use for forms is that the action URL could be changed to an alternate destination when the easter egg is to be revealed. Once the form is submitted, the alternate destination is displayed in the browser. "Changing Form Action URLs On-The-Fly" can help implement this idea.
Easter eggs are limited only by imagination and the technology available to hide and present them.
Be sure to submit all of your easter eggs for inclusion in the Web Page Easter Egg Directory at http://willmaster.com/easter-egg/
Copyright 2004 Bontrager Connection, LLC - All rights reserved
About the Author:
Will Bontrager, "WillMaster Possibilities" ezine
Site Navigation Guide
Site updated daily
Free Insider Report|
Receive free monthly marketing updates, tools, tips and strategies to help your online business succeed. Get immediate access to our bonus ebooks AND 150+ back issues.
PRODUCT OF THE WEEK
Copyright © 2000-2009 by Startup Internet Marketing Services* All rights reserved|
104 Main Street. Kirkland Lake, ON, CA P2N 3E8 705.567.5850
This site is powered by Host4Profit.net