How would i? Is this possible?

[Self_Taught_Still_Learning]

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.

[requinix]

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?