Aanhaallijnen in een figuur zetten
Op deze bladzijde bespreek ik een van de mooiere JavaScripts die ik ooit heb gezien. Het origineel stond oorspronkelijk
op www.24fun.com. Deze site bestaat niet meer.
Het oorspronkelijke script dateert uit 2001. Daardoor werkte het helaas niet meer goed in moderne browsers. Ik heb het script
daarom herschreven, zodat het past bij de huidige stand van de techniek.Het script werkt alen in combinatie met een muis of
trackpad.
Je kunt het downloaden voor je eigen gebruik, inclusief het plaatje.
Hieronder zie je een plaatje. Naast het plaatje staat een lijstje met dingen in dat plaatje te zien zijn. Als je met de muis over dat lijstje gaat, verschijnt er een aanhaallijn naar het overeenkomende stuk van de figuur.
| Zwarte Rechthoek |
| Groene Rechthoek |
| Rode Rechthoek |
| Blauwe Ellips |
| Rode Cirkel |
| Gele Veelhoek |
| Rode driehoek |
| Achtergrond |
- De code bestaat uit drie delen:
- Een JavaScript, dat staat in de file dynimzp2.js. Dit moet je aanpassen voor je eigen doeleinden.
- Een plaatje waar de aanhaallijnen naar wijzen. Dat kun je zelf kiezen. Het hier gebruikte plaatje is artwork.gif. Je kunt ook andere typen plaatjes gebruiken, zoals .JPG en .PNG.
- HTML-code. Het gaat hier om de titels in de <BODY> van het document.
Op deze bladzijde is tevens gebruik gemaakt van een <table> en een <style>-tag in de <HEAD> om een de titels hun kleur te geven.
- De dingen die je kunt of moet veranderen in de file dynimzp2.js staan hieronder opgesomd.
Variabele Betekenis urlimage Naam van het bestand van het plaatje. Hier: artwork.gif.imageborder Breedte van de rand (pixels) rond het plaatje. Dit wordt in de <img>-tag gezet. Hier: 1.dotnumber De aanhaalllijn is feitelijk een stippellijn. Met dotnumber geef je het aantal stippen op waaruit de lijn wordt opgebouwd. Hier: 120.dotcolor De kleur van de aanhaallijn. Hier: #000080 (Donkerblauw).dotwidth Breedte (pixels) van elke stip in de stippellijn. hier: 2.dotheight Hoogte (pixels) van elke stip in de stippellijn. hier: 2.img_left Plaats van het plaatje ten opzichte van de linkerkant van de bladzijde (pixels). Hier: 210.img_top Plaats van het plaatje ten opzichte van de bovenkant van de bladzijde (pixels). Hier: 240. - De <style>-tag kun je aanpassen zoals je wilt. Je kunt het eventueel ook weglaten. Verwijder
dan ook de verwijzingen class="lijn". Die staan in de <span>-tags, binnen elke
cel in de tabel met titels.
- Het lijstje met onderdelen staat in een tabel. De inhoud van elke cel ziet er als volgt uit:
<span class="lijn" onmouseover="createline(50,65)" onmouseout="hideline()">Zwarte Rechthoek</span>
- De aanhaallijn wordt op scherm gezet door aanroep van de function createline(x,y). Dit gebeurt door de event-handler onMouseOver in de <SPAN>-tag.
- De aanhaallijn verdwijnt weer van het scherm als de muis van de titel af wordt bewogen. Dat gebeurt door de event-handler onMouseOut in de <SPAN>-tag, die de function hideline() aanroept.
- De aanhaallijnen beginnen op de plaats waar de muis staat en eindigen op de coördinaten die zijn opgegeven in de aanroep van createline().
- De parameters van de function createline() hebben de volgende betekenis:
Variabele Betekenis x Eindpunt van de aanhaallijn. Dit is de horizontale afstand gemeten van de linkerkant van het plaatje, in pixels.y Eindpunt van de aanhaallijn. Dit is de verticale afstand gemeten van de bovenkant van het plaatje, in pixels. - Voor de opmaak is op deze bladzijde is een tabel gebruikt. Voor dit speciale geval is dat handig. Nodig
is het echter niet. De <SPAN>-tag kun je immers in vrijwel elk HTML-element plaatsen.
- De code werkt -zonder in detail te treden- ongeveer als volgt:
- Het script zet eerst het plaatje op het scherm. Dat gebeurt met een IMG-tag, die met behulp van document.write naar de web-pagina wordt geschreven. De IMG-tag bevat de naam van het plaatje en de breedte van de rand.
- De plaats van het plaatje wordt bepaald door de IMG-tag in te bedden in een SPAN-tag met id='imgcontainer', waarmee de plaats op de pagina wordt bepaald (attributen top en left).
- Tegelijkertijd wordt voor elke stip van de stippellijn een DIV-tag aangemaakt. Hiervoor wordt id=dot1, id=dot2, enz. gebruikt. Voor elke stip is er dus een aparte DIV.
- De DIV-tags met id=dotx blijven leeg. De afmetingen worden gelijk gemaakt aan de gewenste grootte van de stippen (dotwidth en dotheight). De achtergrondkleur wordt ingesteld op de waarde van dotcolor.
- De DIV-tags worden bij het laden van de pagina met behulp van de attributen top en left buiten de marges van de pagina (dus buiten beeld) gezet.
- De beweging van de muis wordt afgevangen, zodat kan worden bepaald waar de aanwijzer zich bevindt.
- Als de function createline() wordt aangeroepen wordt eerst gekeken wat het eindpunt van de aanhaallijn is. De coördinaten van dat punt worden berekend uit de plaats van de figuur in het document (img_left en img_top) en het eindpunt van de lijn (parameters x en y in de aanroep van createline()). De stip wordt getoond door de attributen top en left van de DIV met id=dot1 te veranderen.
- Vervolgens wordt de positie van de muis-aanwijzer bepaald. Dat is het beginpunt van de lijn. Nu kan de wiskundige vergelijking van de aanhaallijn worden berekend.
- De coördinaten van het laatste punt worden bij de aanroep van createline() meegegeven en zijn dus bekend. Daarmee kan de wiskundige vergelijking van de aanhaallijn worden berekend.
- De tweede tot en met de laatste stip worden gelijkmatig over deze lijn verdeeld en getoond.
- Een beperking van deze code lijkt te zijn dat je maar één plaatje met aanhaallijnen
tegelijkertijd op een bladzijde kunt zetten. Dat is niet zo. Alle aanroepen van de function createline()
zijn ten opzichte van de linker bovenhoek van het eerste plaatje. Als je een tweede plaatje wilt gebruiken
zet je dat gewoon in de BODY, maar je fixeert het op de pagina met onderstaande code.
<span style="position:absolute;left:.....px; top:.....px">
Omdat de plaats (linkerbovenhoek) van het eerste plaatje bekend is (img_left en img_top in dynimzp.js) kun je eenvoudig uitrekenen waar de aanhaallijnen moeten eindigen bij de volgende plaatjes.
<img src="......" border=".....">
</span>
- Probeer het voor elkaar te krijgen dat de lijnen ongeveer even lang zijn. Daarmee voorkom je dat de
ene lijn er anders uitziet dan de andere.
Hier is dat niet gedaan. Let op het uiterlijk van bijvoorbeeld de lijnen naar "rode driehoek" en "transparante achtergrond".
Dit script kan fout gaan als de positie van het eerste plaatje niet helemaal vast ligt. Dat is het geval
als de breedte van de inhoud van de bladzijde niet exact vast ligt. De titels gaan dan verschuiven
ten opzichte van het plaatje. waardoor de aanhaallijnen op een verkeerde plaats beginnen.
Op deze bladzijde is dat opgevangen door de tekstbreedte in te stellen op exact 600 pixels. De hele inhoud
van de <BODY is in een <DIV> gezet, met style="width:600px"
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet dit direct na de <BODY>-tag).<style>
span.lijn {color:#f33; font-weight:bold}
</style>
<script src="dynimzp2.js"></script>
(Zet dit direct vóór de </BODY>-tag).<div style="width:600px">
(Zet dit in de <BODY>, op de plaats waar de lijst met links moet komen ).</div>
<table border="0" cellspacing="0" cellpadding="5">
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(50,65)" onmouseover="hideline()">Zwarte Rechthoek</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(100,95)">Groene Rechthoek</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(135,95)">Rode Rechthoek</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(210,30)">Blauwe Ellips</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(240,25)">Rode Cirkel</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(345,80)">Gele Veelhoek</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(280,115)">Rode driehoek</span></td></tr>
<tr><td style="cursor:pointer"><span class="line" onmouseover="createline(50,125)">Transparante Achtergrond</span></td></tr>
</table>
Downloaden:
Druk op de knop:
File: voorb119.zip, 4190 bytes.
