Willekeurig bewegend plaatje
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.
- De code bestaat uit vier delen:
- Een file moveobj.js, die verder geen verandering behoeft.
- Een stukje JavaScript in de <HEAD>.
- Attributen voor gebruik in de <BODY>-tag.
- De opgave van het plaatje en de koppeling aan het JavaScript.
- De code van de rekenfuncties in de file moveobj.js wordt hier verder niet besproken.
Voor het invoegen van deze code wordt verwezen naar het artikel over het Hergebruik van JavaScript.
- Er wordt een object gemaakt van het type "Chip". Dit wordt gedaan met chip1=new Chip("chip1",107,98).
De functie Chip die daarbij gebruikt wordt heeft drie parameters: De naam (= het "ID"), de breedte
en de hoogte van het plaatje. De breedte en de hoogte zijn nodig om te voorkomen dat het plaatje geheel of gedeeltelijk van
het scherm af loopt.
Voor elk plaatje afzonderlijk moet een aparte "Chip"-variabele worden gemaakt: chip1, chip2, enz.
- Tenslotte wordt de beweging in gang gezet door de functie-aanroep movechip("chip1").
Deze functie moet voor elk plaatje afzonderlijk worden aangeroepen.
- Bij het openen van de pagina wordt de functie pagestart() aangeroepen met <BODY OnLoad="pagestart()" ... >.
- Bij het sluiten van de pagina worden de bewegende plaatjes gestopt met onUnload="stopme('chip1')".
Voor elk plaatje (chip1, chip2, enz.) moet stopme apart worden aangeroepen.
- Het plaatje wordt op het scherm gezet met de <IMG>-tag. Hoewel het niet nodig is, worden de attributen border, width en height worden toch opgegeven voor de volledigheid. Het JavaScript "weet" namelijk al hoe groot het plaatje is.
- Het plaatje is (hiervoor) al opgenomen in de variabele chip1 van het type object "Chip".
Dit wordt hier gedeclareerd in het <DIV>-tag. 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.
Met width en height wordt de grootte van het object op het scherm aangegeven. Net als bij de <IMG>-tag is dat hier niet nodig.
Gebruik:
- De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.
(Zet dit JavaScriptje in de <HEAD>)
<script src="moveobj.js"></script>(Zet dit JavaScriptje in de <HEAD> onder het scriptje hierboven.)
<script>(Neem deze attributen op in de <BODY>-tag)
/*Floating image script
By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
Re-written by Ben Boukes (c) 2014 to make it work with modern browsers only.
*/
var chip1;
// add or delete more variables, depending on how many images you're using
function pagestart() {
chip1 = new Chip("chip1",107,98);
// add or delete more of the above, depending on how many images you're using
movechip("chip1");
// add or delete more of the above, depending on how many images you're using
}
</script>
onLoad="pagestart();" onUnload="stopme('chip1')"(Zet deze code bij voorkeur direct onder de <BODY>-tag)
<!-- add or delete more id's, depending on how many images you're using -->
<div id="chip1" style="position:absolute; width:107; height:98;">
<img src="webmas-2.gif" border="0" width="107" height="98">
</div>
Downloaden:
Druk op de knop:
File: voorb009.zip, 1839 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.
