How to Make an Easter Egg

An easter egg on a web page is an intentional hidden message, inside joke, or feature. The key is "intentionally hidden," which implies it can be discovered.

Some examples:

1. Hovering over a certain spot on a page or over an image reveals a hidden message.

2. Typing things into a text box causes the words to disappear.

3. Visiting a page a third time publishes information not previously available.

This article shows how to create the first type, as it is the most versatile easter egg.

Google probably is the best known website that occasionally comes up with new easter eggs. These pages contain a list Google easter eggs:

• The Big List Of Google Easter Eggs

• List of Google hoaxes and easter eggs

• Google easter eggs: 15 best hidden jokes

Making an Easter Egg

Two things are required, the egg and the result.

The egg is something detectable, like those listed earlier – hovering over a certain spot, typing certain things, or revisiting a page – any user action that can be detected.

The result is what happens when the egg is triggered. It can be a popup, an image switch, a lightbox – generally something unusual or unexpected.

Hovering Over a Certain Spot

This is probably the most versatile mechanism, certainly the most versatile of the examples mentioned earlier. The hover spot for the easter egg can be changed and the hidden message or result can be changed.

For the egg, first determine the hover spot. Then put a transparent div with an onmouseover attribute at that spot.

The onmouseover attribute calls a JavaScript function to deliver the result.

Here is an example. Hovering over the digit 3 will reveal a hidden message.

How It's Done

First, I'll provide the code for the egg then the code for the result.

The Egg Code

The div containing the three digits has a a CSS style position:relative. (It could be any position definition other than position:static.) This is the wrapper div.

Within the wwapper div is a transparent div with a CSS style position:absolute. The position:absolute allows the div to be positioned in a certain spot within the wrapper div. This is the easter egg div.

The wrapper div contains the three digits and the easter egg div.

Here is the code:

<!-- The wrapper div. -->
<div style="position:relative; 
            font-size:60px; 
            width:300px; 
            height:60px; 
            overflow:hidden; 
            margin:0 auto 0 auto; 
            border:none">
<!-- The content of the wrapper div. -->
<div style="float:left;">1</div>
<div style="float:right;">3</div>
<div style="text-align:center;">2</div>
<div style="clear:both;"></div>
<!-- The easter egg div, also within the the wwapper div. -->
<div style="position:absolute; 
            top:0px; 
            right:0px; 
            z-index:99; 
            background-color:transparent; 
            width:40px; 
            height:60px;" 
     onmouseover="MouseoverMessageInAlertBox()"></div>
</div>
<!-- End of wrapper div. -->

Put the code where the div with the three digits is to be published.

The wrapper div could contain any other content, like an image for example. The easter egg can be positioned anywhere within the wrapper div, or even to a spot outside the wrapper div if necessary for your implementation.

Quite versatile.

The Result Code

The result code determines what happens when the easter egg is triggered, when the mouse pointer hovers over the digit 3 in our example.

When the mouse pointer hovers over the digit 3, the JavaScript function MouseoverMessageInAlertBox() is triggered. Here is the complete JavaScript for the example easter egg.

<script type="text/javascript">
var firstTime = true;
var message = "Cool. You tried it!";
var later = "\n\nThis is the real easter egg.\n\nThe first message isn't a real easter egg because the web page says what to do.\n\nThis one, however, is a message revealed only if the number '3' is hovered over more than once.\n\n "
function MouseoverMessageInAlertBox()
{
   if(firstTime) { alert(message); }
   else { alert(later); }
   firstTime = false;
}
</script>

Put the JavaScript anywhere on the web page.

The MouseoverMessageInAlertBox() function could be modified to have a different message, launch a lightbox, display an ad, cause something to disappear from the page – anything JavaScript can do.

The ability to do anything that can be done with JavaScript when the easter egg is triggered greatly increases the number of different ways the "hover over a certain spot" method can be implemented. It's limited is the limit of imagination.

Will Bontrager