JS - Berichten in de statusbalk



Met behulp van JavaScript kun je een bericht laten weergeven in de statusbalk van de browser. Bijvoorbeeld een toelichting op een hyperlink of een copyright-melding bij het openen van een document. Omdat scrollende (bewegende) teksten in de statusbalk bij nogal wat mensen irritatie opwekken, wordt geadviseerd het gebruik ervan te beperken.

De volgende voorbeelden worden gegeven:


Toelichting bij een hyperlink of afbeelding

Het bericht in de statusbalk verschijnt als je de muisaanwijzer boven de hyperlink schuift. Hij verdwijnt weer na een in te stellen aantal milliseconden.

Beweeg de muisaanwijzer op de hyperlink

Doe het ook met deze hyperlink

De onmouseover event handler (zie het onderdeel Scripts), die er voor zorgt dat het script wordt aangeroepen, werkt alleen bij hyperlinks. Als je een afbeelding opneemt in een hyperlink, kun je die echter ook van een toelichtend bericht voorzien.

Digitale Stad Delft

De eerste hyperlink in de body van dit document heeft de volgende opbouw:

<A HREF="bestemming" onmouseover="moveover('Deze link is fake');return true;">Beweeg de muisaanwijzer op de link</A>

Voor de afbeelding is de opbouw:

<A HREF="bestemming" onmouseover="moveover('Dit is het logo van de Digitale Stad Delft'); return true;"><IMG SRC="dsd.gif" WIDTH="89" HEIGHT="88" BORDER="0" ALT="Digitale Stad Delft"></A>

Als waarde van het HREF attribuut gebruik je in plaats van "bestemming" uiteraard een bestaande URI.

Zorg er voor dat in het onmouseover event handler de complete tekst van de boodschap inclusief de aanhalingstekens op dezelfde regel staat en niet onderbroken wordt door een harde overgang naar de volgende regel.

In de head van dit document is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function moveover(txt) {
window.status = txt;
setTimeout("erase()",3000);
}

function erase() {
window.status="";
}
//-->
</SCRIPT>

De in de setTimeout-methode opgenomen waarde geeft aan, na hoeveel milliseconden de boodschap weer verdwijnt.

In Opera 3 en 3.5 werkt onmouseover alleen zolang de muisaanwijzer op de hyperlink staat.


Door Netscape Navigator 3 en hoger en Microsoft Internet Explorer 4 en hoger wordt naast de onmouseover event handler ook de onmouseout event handler ondersteund. Je kunt daarmee het bericht in de statusbalk laten verdwijnen, als de muisaanwijzer weer van de hyperlink af gaat. Gezien het gedrag van Opera 3 en 3.5 bij onmouseover, valt bij deze browsers geen actie te omschrijven bij de onmouseout event handler.

Beweeg de muisaanwijzer over de link

De hyperlink heeft de volgende opbouw:

<A HREF="bestemming" onmouseover="BeweegMuisOp('De muisaanwijzer staat op de link');return true;" onmouseout="BeweegMuisAf();">Beweeg de muis over de link</A>

In het script in de head van dit document wordt eerst getest welke browser gebruikt wordt. Dat gebeurt op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus voor het volgende script in het document plaatsen.
Als het gaat om Netscape Navigator 2 of Microsoft Internet Explorer 3, dan wordt de setTimeout-methode toegepast.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function BeweegMuisOp(txt) {
if (!NN2 && !IE3) {
window.status = txt;
setTimeout("BeweegMuisAf()",3000);
}
else {
window.status = txt;
}
}

function BeweegMuisAf() {
window.status="";
}
//-->
</SCRIPT>


Volgend voorbeeld


Inhoud   Inhoud Handleiding HTML   Overzicht JavaScript voorbeelden   Inhoud JS - Berichten in de statusbalk


De gebruikte style sheets voldoen aan CSS 2 Dit document voldoet aan HTML 4.01 Laatste wijziging 23 september 2000
Copyright © 1995-2000 Hans de Jong