Ben's Hobbyhoekje -- Lokale Popup in een DIV-tag I: mouseover / mouseout

Lokale Popup in een <DIV>-tag I: mouseover / mouseout

Er zijn websites waarop er een popup verschijnt als je met de muis over een 'keyword' heen gaat. Als je de muis verplaatst verdwijnt de popup weer.
De links zijn vaak herkenbaar aan de dubbele onderstreping. Als je met de muis over de links beweegt zie je het effect werken.
Op een aanraakscherm tik je op de "link" om de popup zichtbaar te maken en op de popup zelf om hem te laten verdwijnen.

Op deze bladzijde wordt besproken hoe je dit kunt toepassen op je eigen website.
De code van het voorbeeld staat onderaan de bladzijde. Je kunt hem downloaden om zelf te gebruiken.

Hier wordt besproken hoe je dit script in je eigen site in kunt bouwen. Op de werking van het script zelf wordt niet verder ingegaan.
Dit script is gebaseerd op het item Tooltips in JavaScript.
De aanpak in dat script en de aanpak op deze bladzijde verschillen niet wezenlijk van elkaar. In beide gevallen laat je iets verschijnen als de muis over een 'link' gaat, en laat je het weer verdwijnen als je de muis van de 'link' af beweegt.
Feitelijk plaats je gewoon een tooltip bij de muis-aanwijzer.
Het Javascript dat de popup laat verschijnen/verdwijnen staat in alttxt2.js. Dat zet je in de <HEAD>.
De HTML-code van de meldingen die je in de popups wilt laten zien, staan in de array popupTekst. Voor elke popup bevat popupTekst een element. De nummering hoeft niet aaneengesloten te zijn.
De pijlpunt is een plaatje: arrowup.png.
De afmetingen zijn 23 x 13 px en het is gedeeltelijk transparant.
De popups worden verder opgemaakt met de class NavText.
De links worden opgemaakt met de class popuplink.
De popups bestaan uit twee delen:
- De witte rechthoek met de tekst. Deze heeft id="navtxt".
- De pijlpunt. Deze heeft id="navarrow".
De eigenschappen van deze id's worden opgegeven in het style-block. Beide id's moeten worden gedeclareerd in de <BODY>, bij voorkeur aan het begin. Hierbij kan navtxt leeg worden gelaten, navarrow bevat alleen een <img>-tag voor de pijlpunt.
De zichtbaarheid en de plaats op het scherm worden geregeld door het JavaScript.
De 'links' zelf zijn geen echte links. Er zijn geen <a>-tags. De dubbele onderstreping wordt gemaakt door aan de tekst de class popuplink toe te voegen in een <span>-tag, bijvoorbeeld:

<span class="popuplink"
onMouseOver="showPopup(popupTekst[0])"
onMouseOut="showPopup()">'keyword'</span>
De span gaat zich gedragen als 'link' door de onmouseover en de onmouseout
- Als de muis over de link gaat wordt de function showPopup() aangeroepen, met tekststring als parameter. Hier is een element uit de array popupTekst[] gebruikt (een verwijzing naar een string), maar je kunt ook direct een string gebruiken, bijvoorbeeld onMouseOver="showPopup('Hallo allemaal!')".
- Als de muis van de link af gaat, wordt showPopup() weer aangeroepen, maar nu met een lege parameterlijst. showPopup() zal de popup nu sluiten.

Er zijn vier parameters in de file alttxt2.js die kunnen worden aangepast:

Variabele	Betekenis
center	Als center = true verschijnt de tooltip gecentreerd onder de muispijl. Als center = false wordt de tooltip rechts onder de muispijl geplaatst. Op deze bladzijde: center = false.
centertext	Als centertext = true wordt de text in de box gecentreerd; als centertext = false wordt de tekst links uitgelijnd. Op deze bladzijde: centertext = false.
minBoxwidth	De breedte van de popups wordt automatisch bepaald op basis van de tekstbreedts en de beschikbare ruimte op het scherm. De popup wordt echter nooit smaller dan minBoxwidth. Op deze bladzijde: minBoxwidth = 150 (pixels).
shiftx	Hiermee geef je de breedte van de pijlpunt aan. Voor je eigen toepassing kan het gebeuren dat je deze waarde iets moet aanpassen. Deze waarde moet ongeveer even groot zijn van de breedte van de pijlpunt. Op deze bladzijde: shiftx = 23 (pixels).

Behalve het hierboven genoemde behoeft de file alttxts.js geen verandering, tenzij je de pijlpunt, arrowup.png, wit veranderen. Indat geval wijzig je de regels 45 en 46 van alttxt2.js:

navarrow.style.left = (x+5)+'px';
navarrow.style.top = (y+18)+'px';

Door een beetje met de getallen (18 en/of 5) te spelen komt de pijl al gauw weer goed op de tekstbox te staan. Maar let ook op de parameter shiftx!

Je kunt alle geldige HTML in een popup kwijt. De tekst in de twee popups van het voorbeeld is gewoon, vet en vet- en schuingedrukt. Maar plaatjes kunnen ook!

Er zijn ook toepassingen van deze techniek waarbij de popup een bepaalde tijd blijft staan en/of tot je er op klikt. Dat zijn eigenlijk niet meer dan variaties op dit thema.
Zie bijvoorbeeld het item Lokale Popup in een <DIV>-tag II: mouseclick.

Gebruik:

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

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
#navtxt { position:absolute; top:0; left:0; margin:0; padding:10px; visibility:hidden }
#navarrow { visibility:hidden; position:absolute; top:0; left:0; }
.NavText { width:auto; font-family:Arial; font-size:10pt; border:2px solid black; background-color:#fafafa;color:#000; }
.popuplink { border-bottom:3px double #060; color:#060; }
</style>

<script>
var popupTekst = new Array();
popupTekst[0] = "Een <i><b>keyword</b></i> is een kernwoord in een tekst.<br>In het Nederlands wordt 'keyword' vaak vertaald met: <b><i>'Sleutelwoord'</i></b>.";
popupTekst[1] = "<i><b>Dubbel onderstreept</b></i> is een aanduiding voor een woord of woorden in een tekst waar twee strepen onder staan.";
popupTekst[2] = "<img src='roll.gif'> Deze popup bevat een plaatje, compleet met beweging!";
</script>
<script src="alttxt2.js"></script>
Voor de leesbaarheid zijn sommige JavaScript opdrachten over meerdere regels verdeeld. In je eigen code staat dat natuurlijk op één regel

(Zet dit in de <BODY>, bij voorkeur direct na de <BODY>-tag).

<div id="navtxt" class="NavText"></div>
<div id="navarrow"><img src="arrowup.png"></div>

(Zet dit in de <BODY>, op de plaats waar de links moeten verschijnen).

<span class="popuplink"
onMouseOver="showPopup(popupTekst[0])"
onMouseOut="showPopup()">'keyword'</span>

Downloaden:

Druk op de knop: File: voorb308.zip, 2980 bytes.

Opmerking:

Ook hier geldt: Wees voorzichtig met de toepassing. Te veel beweging en/of opspringende popups maken het beeld onrustig. Bezoekers van je site zullen geneigd zijn te vertrekken om niet meer terug te komen. Gebruik dit dus alleen als het echt wat toevoegt aan je site.

Deze techniek wordt vaak gebruikt reclame te maken (lees: geld te verdienen). Het is echter nogal irritant als er steeds reclameboodschappen over je scherm daveren. Dat moet je dus zelf níét doen.

Dit soort pupups, of tooltips, kun je ook maken met alleen CSS. Zie het item Tooltips in CSS.