Plaatje of tekst die wegspringt als je er met de muis over gaat

Houd de muis-aanwijzer buiten deze bladzijde, anders wordt het onleesbaar!
Ververs zo nodig de pagina om de volledige tekst te kunnen zien.

Dit is een prima manier om je bezoekers prettig mee te amuseren. Als je dit goed toepast kan het effect heel grappig zijn; je bezoekers zullen zeker weer eens terug komen.
Maar als je het niet goed toepast gaan ze weg en komen ze nooit meer terug...

Hier staat beschreven hoe je dit moet aanpakken. Je kunt de code ook downloaden voor je eigen gebruik, inclusief de plaatjes.

• Er worden twee items besproken:
  1. Gebruik van deze code op je eigen bladzijde.
  2. Tips en trucs om de opmaak van je bladzijde in de hand te houden.
   
• Deze code is gebaseerd op het script "Knop die wegspringt als je er met de muis over gaat".
• De HTML waar de wegspringende onderdelen zich bevinden wordt in het document ingesloten in een <div>-tag met ID="my_HTML".
• De code staat in de file jumphtml.js. Dit bestand plaats je direct achter de tag <div id="my_HTML">.
• Om deze code goed te kunnen gebruiken moet je hem veranderen.
   
• In de Array TheHTML zet je de HTML-code van de zaken die je wilt laten wegspringen. Alle tags die een ID='...' kunnen hebben zijn toepasbaar. De tags krijgen een handler voor onmouseOver.
• In TheHTML[0] gebruik je id='html0'. In TheHTML[1] gebruik je ID='html1'. Enzovoort.
• De variabele theNumberOfLines bevat het aantal regels code in Array TheHTML.
   
• De code die in <div id="my_HTML"> wordt geplaatst mag meer omvatten dan alleen de HTML van de wegspringende delen. Op deze pagina wordt een tabel gebruikt voor de opmaak. Je zet deze code in de variabele str.
• Maak een DIV-tag voor elke ID='...' die je in de array TheHTML hebt gebruikt.
  Deze tag ziet er als volgt uit:

  <div id="html0" style="position:relative;z-index:10"></div>

• Eventueel kun je hier extra attributen aan toevoegen, zoals align="center".
• De waarde van z-index moet groter zijn dan 0.
   
• De Array cross_el bevat één regel voor elke ID. Deze array wordt automatisch gevuld.
• Het eerste volgnummer in de arrays is 0. Er mogen geen gaten in de nummering zitten.
   
• De maximale grootte van de "sprongen" stel je in met jumpx (horizontaal) en jumpy (verticaal). De waarden zijn in pixels.
• Als jumpx en/of jumpy groter zijn dan de breedte respectievelijk hoogte van het plaatje, kan dat uit beeld verdwijnen.
   
• Alle HTML-code die stukken bevat die je laat wegspringen moet je in het JavaScript programmeren met behulp van str. Op deze bladzijde is dat de hele tabel die de drie wegspringende elementen bevat.
  Hiermee voorkom je dat de opmaak zich onvoorspelbaar gaat gedragen.
• Als je het attribuut align='...' wilt gebruiken, dan moet je dat opnemen in de <div>-tags waarmee de id's worden vastgelegd. Zet het niet in de array met HTML-code, want dan werkt het niet.
   
• Om de opmaak van de pagina goed in de hand te houden kun je het beste een tabel gebruiken. Op deze bladzijde is dat goed te zien aan de tabel-randen. Hier is gebruik gemaakt van de attributen:

  align="center" border="1" cellpadding="5" cellspacing="1".

  De tabel-randen staan hier alleen voor de duidelijkheid. Gewoonlijk maak je de randen onzichtbaar door border="0" te gebruiken.
• Om tekst in een tabel te zetten gebruik je <p>.......</p>-tags in de table-cell. De <p>-tag krijgt het id='...' en de onmouseOver. Zet deze zaken dus niet in de <td>-tag!
• Het gebruik van <p> in een table cell is oneigenlijk gebruik van de HTML-standaard, maar dat is deze hele code toch al....
   
• De werking van het script is, zonder in detail te treden, als volgt:
  • Bij het openen van het script wordt een set <div>-tags in de bladzijde gezet. Deze hebben het id='html0', id='html1', enz. Er zijn net zoveel div-tags als theNumberOfLines. De positie is relative.
  • De eigenschappen van html0, html1, ... worden in een array cross_el gezet.
  • Als de pagina geheel is geladen wordt de function changeIt() aangeroepen. Dit gebeurt via de opdracht window.onload, aan het einde van het script.
  • De function changeIt() zet de HTML-code op het scherm door de eigenschappen van html0, html1, ... te wijzigen: in de eigenschap innerHTML wordt de HTML-code gezet.
  • Alle tags die een id='...' kunnen hebben zijn toepasbaar. De tags krijgen een handler voor onmouseOver. Die roept de function moveIt() aan.
  • De function moveIt() zorgt voor het verplaatsen van het HTML-object, door de coördinaten top en left willekeurig te veranderen. De grootste waarden van de verplaatsingen zijn jumpx resp. jumpy.

Gebruik:

• De code staat in de <BODY>.
• Wijzigingen aan te brengen in de file jumphtml.js zoals hierboven is aangegeven:

  jumpx, jumpy
  Inhoud van de array TheHTML
  HTML-code in de Javascript-opdrachten str += '     ';

De code ziet er als volgt uit:
 
(Zet dit in de <BODY>, op de plaats waar de je wegspringende stukken wilt hebben;
De volgorde niet wijzigen).

<div id="my_HTML"></div>
<script src="jumphtml.js"></script>

Downloaden:
 
Druk op de knop:  File: voorb133.zip, 27 840 bytes.

Opmerking:
 
Je kunt dit soort grappen ook uithalen met formulier-elementen, zoals een button. Zie daarvoor het item "Knop die wegspringt als je er met de muis over gaat".