An easter egg on a web page is an intentional hidden message, inside joke, or feature. The key is “intentionally hidden”, which implies that it can be discovered.
Some examples:
-
Hovering over a certain point on a page or over an image reveals a hidden message.
-
When you type things into a text box, the words disappear.
-
Visiting a page a third time publishes information that was not available before.
This article shows how to create the first type, as it is the most versatile Easter egg.
Google is probably the best-known website that occasionally features new Easter eggs. These pages contain a list of Google Easter Eggs:
-
The Great Google Easter Egg List
-
List of Google Easter Eggs and Hoaxes
-
Google Easter Eggs: 15 Best Hidden Jokes
Make an Easter Egg
Two things are required, the egg and the result.
The egg is something detectable, such as those listed above: hovering over a certain place, typing certain things, or revisiting a page, any user action that can be detected.
The result is what happens when the egg is activated. It can be a popup, a makeover, a lightbox, usually something unusual or unexpected.
Hover over a certain point
This is probably the most versatile mechanism, certainly the most versatile of the examples mentioned above. The hover point of the Easter egg can be changed and the hidden message or the result can be changed.
For the egg, first determine the offset point. Then put a transparent div with an onmouseover attribute in that place.
The onmouseover attribute calls a JavaScript function to deliver the result.
Here’s an example. Hovering over the digit 3 will reveal a hidden message.
How To
First, I’ll provide the code for the egg, and then the code for the result.
The code for the egg
The div containing the three digits has a CSS-style position: relative. (Could be any position definition other than position:static.) This is the container div.
Inside the wwapper div is a transparent div with a CSS style position: absolute. The position:absolute allows the div to be positioned at a certain place within the containing div. This is the easter egg div.
The container div contains the three digits and the easter egg div.
Here is the code: