Ben's Hobbyhoekje -- Willekeurig bewegend plaatje II

Willekeurig bewegend plaatje II

De bedoeling van deze bladzijde is zonder uitleg wel duidelijk. Er wordt hier een vrij complex stukje (bestaand) JavaScript gebruikt om het plaatje te laten bewegen. Hier staat beschreven hoe je dit kunt aanpassen en gebruiken voor je eigen doeleinden.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden, inclusief het plaatje.

Deze code is een gemodificeerde versie van een code die is gemaakt door Lloyd Hassell. De oorspronkelijke code toont een stuiterende bal. Vandaar dat de naam van veel variabelen in de code er op duiden dat het over een bal gaat.
De code bestaat uit drie delen:
- Een file moveobj2.js, die aangepast kan worden voor eigen gebruik.
- Een <style>-block in de <HEAD>.
- De opgave van het plaatje en de koppeling aan het JavaScript.
In de file moveobj2.js kun je de volgende regels veranderen:
- var ballWidth = 50; // Breedte van het plaatje. Moet gelijk zijn aan "width" in het STYLE-block en de IMG-tag.
- var ballHeight = 50; // Hoogte van het plaatje. Moet gelijk zijn aan "height" in het STYLE-block en de IMG-tag.
- var BallSpeedX = 4; // Horizontale bewegingssnelheid. Hoger is sneller.
- var BallSpeedY = 1; // Verticale bewegingssnelheid. Hoger is sneller.
- var stopafter = 0; // Tijd in seconden die het plaatje zichtbaar blijft. Zet dit op nul om het plaatje niet te laten verdwijnen.
- var xPos = 0; // Horizontale positie waar de beweging begint. Moet gelijk zijn aan "left" in het STYLE-block.
- var yPos = 0; // Verticale positie waar de beweging begint. Moet gelijk zijn aan "top" in het STYLE-block.
- var xDir = 'left'; // Start richting van de horizontale beweging: left, right of none (gelijk aan BallSpeedX = 0).
- var yDir = 'down'; // Start richting van de verticale beweging: up, down of none (gelijk aan BallSpeedY = 0).
Deze zaken staan in beeldpunten (Pixels).
Als BallSpeedX en BallSpeedY gelijk zijn aan elkaar beweegt het plaatje onder een hoek van 45°. Je kunt dit veranderen door ze ongelijk aan elkaar te maken. De snelheid waarmee het plaatje beweegt stel je in door de grootte van BallSpeedX en BallSpeedY te veranderen.
BallSpeedX = 0 resulteert in een verticale, op- en neergaande beweging.
BallSpeedY = 0 resulteert in een horizontale, heen- en weergaande beweging.
De beweging start zodra de pagina in zijn geheel is geladen.
De code van de rekenfuncties in de file moveobj2.js wordt hier verder niet besproken.
Het plaatje wordt op het scherm gezet met de <img>-tag binnen de <span>-tag.
Het plaatje wordt opgenomen in het object "document" door het de naam superball te geven. De verschijningsvorm ("style") van het plaatje (eigenlijk het object) wordt hier gedefinieerd in termen van de manier waarop het op het scherm wordt gezet. Met position:absolute wordt aangegeven dat de plaats van het plaatje in het window vaststaat en dus niet door de browser kan worden gekozen. Position:absolute verwijst naar X-Y-coördinaten van het window, die in het object zijn vastgelegd. Deze worden door het JavaScript voortdurend een beetje veranderd. Daardoor beweegt het plaatje.

Gebruik:

De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.

De code ziet er als volgt uit:

(Zet dit JavaScriptje in de <HEAD>)

<script src="moveobj2.js"></script>

<style>
#superball {
position:absolute; left:0; top:0;
visibility:hidden;
width:50px; height:50px; }
</style>

(Zet deze code bij voorkeur direct onder de <BODY>-tag)

<span id="superball">
<img name="superballImage" src="comic_01.gif" height="50"
width="50" border="0">
</span>

Downloaden:

Druk op de knop: File: voorb047.zip, 3541 bytes.

Opmerking:

Ook hier geldt: Wees voorzichtig met de toepassing. Een te groot plaatje dat steeds over de tekst heen schuift maakt het lastig om de tekst te lezen! Dit soort zaken is eigenlijk meer geschikt als blikvanger in een (dia-)presentatie.