Ben's Hobbyhoekje -- Lokale Popup in een DIV-tag II: mouseclick

Lokale Popup in een <DIV>-tag II: mouseclick

Aan het eind van deze deze alinea staat een sterretje. Als je er op klikt verschijnt er bij de muis-aanwijzer een popup-je met daarin een voetnoot. Als je weer op het sterretje klikt, of als je op de popup zelf klikt, verdwijnt de popup weer.

Op deze pagina wordt uitgelegd hoe je dat kunt aanpakken. De code kun je downloaden om zelf te gebruiken.

Er worden twee zaken besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
De code van de popups bestaat uit een stukje JavaScript en een <style>-blok. Deze zaken staan in de <HEAD>.
De inhoud van de popup(s) staat in de <BODY>, binnen twee geneste <div>-tags.
Het JavaScript staat in de file popupnote.js. Dat hoeft niet te worden aangepast om het te gebruiken.

De plaats van de popup ten opzichte van de muis-pijl en de breedte van de popup kan worden aangepast door de defaults in popupnote.js te overschrijven. Dat doe je door de waarde van de variabelen opnieuw op te geven na het laden van popupnote.js. Zie onderstaande tabel en de code onderaan de pagina.

*Variabele*		*Betekenis*
PopUpWidth		Breedte van de popup, in pixels. default: 100, op deze pagina overschreven met 200.
x_offset		Horizontale afstand van de linker bovenhoek van de popup tot de muispijl, in pixels. default: 10 (de breedte van het sterretje), op deze pagina overschreven met 20. x-offset wordt gemeten vanaf de linkerkant van het sterretje. Dat is hier 10px breed. Doordat dit is veranderd in 20px, verschijnt de popup op 10px naast het sterretje.
y_offset		Verticale afstand van de linker bovenhoek van de popup tot de muispijl, in pixels. default: 10 (de hoogte van het sterretje), op deze pagina overschreven met 15. y-offset wordt gemeten vanaf de bovenkant van het sterretje. Dat is hier 10px hoog. Doordat dit is veranderd in 15px, verschijnt de popup op 5px onder het sterretje.

Het is niet nodig om de defaultwaarden te herdefiniëren. Als de defaults voor jou OK zijn, kun je het weglaten.
Het is ook mogelijk om de breedte en de offset van elke popup apart in te stellen. Dat doe je via de parameterlijst van de function PopUpOnOff(), zie verder in dit document.
Het <STYLE>-blok definieert de opmaak van de popups in #PopUp. Daarnaast is er voor elke popup een aparte regel waarmee de plaats op het scherm en de zichtbaarheid worden bepaald: #PopUp_1, #PopUp_2, #PopUp_3 enzovoort.
De nummering van de afzonderlijke popups hoeft niet aaneengesloten te zijn.
Op de plaats waar je een popup wilt laten verschijnen, moet je een "marker" plaatsen. Op deze bladzijde is dat een sterretje.
Zoals je ziet zijn de breedte en de plaats anders dan bij andere popups.
De afmetingen en de plaats van deze noot zijn bepaald met de parameterlijst:

PopUpOnOff('2',event,300,20,40)
.
- Het sterretje is een .GIF-plaatje met de afmetingen van 15 × 15 pixels. In de <img>-tag zijn de afmetingen veranderd in 10 × 10 pixels met behulp van de attributen width en height.
- Afhankelijk van de grootte van de tekst moet je dit groter of kleiner maken, hoewel ik het niet aanraad om minder dan 8px te nemen. Het moet wel goed aanklikbaar blijven.

Door op de marker te klikken wordt de function PopUpOnOff() geactiveerd. Deze function heeft vijf parameters, waarvan de eerste twee verplicht zijn. De laatste drie parameters mogen dus worden weggelaten. Zie onderstaande tabel.

*Parameter*		*Betekenis*
seqno		Volgnummer van de popup, refereert aan #PopUp_1, #PopUp_2, enz. Moet tussen aanhalingstekens worden gezet. Verplicht.
e		Methode om het onClick-event door te geven aan PopUpOnOff(). Gebruik hier altijd het woord *event* (zonder aanhalingstekens!), om problemen met IE te voorkomen. Verplicht.
my_width		Breedte van deze popup, in pixels. Overschrijft de default-waarde. Dit is een geheel getal, zonder aanhalingstekens. Optioneel, tenzij x_off wordt opgegeven. Dan is my_width verplicht.
x_off		Horizontale afstand van de linker bovenhoek van de popup tot de muispijl, in pixels. Overschrijft de default-waarde. Dit is een geheel getal, zonder aanhalingstekens. Optioneel, tenzij y_off wordt opgegeven. Dan is x_off verplicht.
y_off		Verticale afstand van de linker bovenhoek van de popup tot de muispijl, in pixels. Overschrijft de default-waarde. Dit is een geheel getal, zonder aanhalingstekens. Optioneel.

De in de tabel genoemde zaken gelden bij het zichtbaar maken van de popup. Om de popup te verbergen volstaat seqno.
Als de popup te breed is om hem rechts van de marker te plaatsen zonder dat de popup van het scherm verdwijnt, dan schuift het script de popup naar links van de muis-aanwijzer.
Als de popup breder is dan het document zal aan de linkerkant van de popup een deel onzichtbaar worden. Het script past dat niet aan.
De code voor de inhoud van de popups moet 'ergens' in de <BODY> staan, maar het beste zet je die vlakbij de code van de marker neer. Dat vergemakkelijkt het onderhoud.
De code voor de inhoud van de popup wordt omsloten door twee (geneste) <div>-tags.
- De buitenste <div>-tag regelt de plaats en de zichtbaarheid. De id>="PopUp_xx", waarbij xx staat voor het volgnummer van de popup, zoals hieronder wordt genoemd. Behalve de marker heeft deze tag de event-handler onclick, waarmee de
- De binnenste <div>-tag regelt de opmaak, via het id="PopUp".
De <div>-tags voor popup nr. 3 zijn dus:

<div id="PopUp_3" onclick="PopUpOnOff('3')"><div id="PopUp"> … </div></div>
De popup's kunnen alle geldige HTML-tags bevatten. Plaatjes en hyperlinks kunnen dus ook. Tags die naar een id verwijzen, kunnen problemen geven.

Alle HTML is toepasbaar in een popup.
Hyperlinks kunnen dus ook.
Maar pas op met tags die naar een id verwijzen.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <lBODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
#PopUp { font:100%/1.2em Arial,sans-serif; color:#007;
background-color:#ddd; border:2px solid #070; margin:0;
padding:10px; cursor:pointer}
#PopUp_1 {position:absolute; top:0; left:0; z-index:100; display:none}
#PopUp_2 {position:absolute; top:0; left:0; z-index:100; display:none}
.
(Herhalen voor elke afzonderlijke popup)
.
</style>

<scrip src="popupnote.js"></script>

<script>
// Overschrijf default waarden
// Alleen als de defaults niet goed zijn:
// x_offset:10; y_offset:10; PopUpWidth: 100;
x_offset = 20;
y_offset = 15;
PopUpWidth = 200;
</script>

(Zet dit in de <BODY>, op de plaats waar een marker moet verschijnen).

<img src="sterretje.gif" alt="Voetnoot" title="Klik voor voetnoot"
width="10" height="10" border="0" style="cursor:pointer" onclick="PopUpOnOff('3',event)">
<div id="PopUp_3" onclick="PopUpOnOff('3')"> <div id="PopUp">
<img src="routebes.gif" width="75" height="50" border="0"
style="float:left; margin-right:10px">
 <br>
Alle HTML is toepasbaar in een popup.<br>
<a href="html-312.htm" target="NewBen">Hyperlinks</a>
kunnen dus ook.<br>
Maar pas op met tags die naar een <i>id</i> verwijzen.
</div></div>

Downloaden:

Druk op de knop: File: voorb312.zip, 5487 bytes.