Jump to content

How would i? Is this possible?


Recommended Posts

Ok, so the idea is to build an 'easter egg' into my website. What i want to do is have an image set in the bottom left corner(i.e. A gate). If that image is clicked another image(i.e An Animal) will appear on screen and start moving around. Once you have clicked on that image you get a little display basically saying well done.

 

I have no code for this so any help would be helpful.

Link to comment
Share on other sites

The first image is simple: do something like

<img id="egg1" src="/path/to/image1.png" style="..." onclick="...">
then use CSS to position it in the corner:

style="position:absolute;left:0px;bottom:0px;"
onclick with Javascript can detect the click

onclick="egg1();"
function egg1() {
	// ???
}

Something similar goes for the second image.

<img id="egg2" src="/path/to/image2.png" style="..." onclick="egg2();">
The CSS is a little different, as you don't know the exact position yet and you don't want the image to be initially visible.

style="position:absolute;display:none;"
Javascript presents the message.

function egg2() {
	alert("Well done!"); // or whatever
}

The "hard" part is moving the second image around the screen (and that is what goes into the ??? from earlier). How's that supposed to look?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.