Verstopt paasei

Op deze pagina is een paasei verstopt

Beweeg met je muis om hem te vinden.

Kun je hem niet vinden?
TIP: rechtsonder

Heb je zelf een website? Bijvoorbeeld uit een eerdere CoderDojo?
Dan kun je met een paar regels code ook een paasei verstoppen op je eigen site! Of meerdere!

Het belangrijkste wat je nodig hebt is het stukje CSS hieronder. Dit plaats je in je style.css bestand, of tussen de tags <style> en </style>.

#paasei {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 100px;
    width: 80px;
}
#paasei:hover {
    background-image: url('https://coderdojo-arnhem.github.io/static/img/ei/6.gif');
    background-repeat: no-repeat;
    background-size: contain;
}

In het eerste stukje staat waar je ei is verstopt. bottom en right zijn de afstand aan tot de rand van het scherm (in pixels). Je kunt daar ook top of left voor gebruiken. De hoogte en breedte van je ei worden natuurlijk bepaald door height en width.

De magie zit in het tweede stukje. Daar wordt met :hover aangegeven wat er gebeurt als je er met een muis overheen beweegt.
In dit geval wordt er een plaatje van een paasei als achtergrond geplaatst. In dit voorbeeld plaatje 6.gif. Maar je kunt ook 1 tot en met 5 proberen.
Je kunt ook op internet een ander plaatje zoeken, en de link daarvan gebruiken.
Of zelf een paasei tekenen (vraag maar even hulp als je niet weet hoe je die moet uploaden).

De laatste 2 regels background-repeat: no-repeat; en background-size: contain; zijn nodig om te zorgen dat je niet meerdere eieren of een half ei te zien krijgt. Maar als je height en width precies overeenkomen met de afmetingen van het plaatje, zou je deze regels ook weg kunnen laten.

Het enige wat vervolgens nog nodig is is het verborgen ei toe te voegen aan de html. Daarvoor voeg je het volgende stukje toe in je html bestand. Het maakt niet uit waar je het stukje in je pagina plaatst, want de positie hadden we al in de css gezet!

<div id='paasei'></div>

Wil je meerdere paaseieren plaatsen?
Herhaal dan alles, en vervang paasei door bijvoorbeeld paasei2.

← Terug naar materiaal