Links beschrijven in statusbalk met JavaScript
Het kan erg handig zijn om te weten waar een pagina ongeveer over gaat voordat je op de link klikt naar die pagina. Dit is mogelijk met JavaScript. Je zult lezen hoe je met het onMouseOver event beschrijvingen van links kunt laten verschijnen in de statusbalk van de browser.
onMouseOver event
Als je niet precies meer weet wat een event in JavaScript precies inhoudt, kijk dan nog even naar deze les van onze cursus.
Hieronder gaan we via onMouseOver een beschrijving van de link in de statusbalk laten verschijnen. Je kunt een gewone tekstlink gebruiken, maar eventueel ook een gelinkt plaatje. Als je dus na het plaatsen van de code met je muis op de link (of het plaatje) gaat staan, dan zal de beschrijving in de statusbalk te zien zijn.
De Code
Gebruik de volgende code:
<a href="http://www.homepage-maken.nl/index.php" onMouseOver="window.status = 'Klik hier om naar de beginpagina te gaan'; return true;">Home</a>
De code in het oranje is JavaScript. Het resultaat van de code is als volgt:
Ga maar eens met de muis op bovenstaande link staan. Kijk nu naar de statusbalk van je browser (bij Internet Explorer staat deze standaard linksonderin het scherm). Nu zie je daar de omschrijving van de link staan.
Hoe werkt deze code nu eigenlijk? Nou, zoals je hebt gelezen is onMouseOver de event handler. Na het = teken achter onMouseOver staat vervolgens de event die uitgevoerd moet worden. In dit geval "window.status = 'Klik hier om naar de beginpagina te gaan'; return true;".
Met window.status wordt de statusbalk in JavaScript aangeduid. Via het = teken dat volgt wordt een waarde toegekend aan window.status. Hier is dat de tekst die we willen tonen in de statusbalk.
Verder zal een aantal zaken in de code je bekend voorkomen als je de JavaScript cursus hebt gelezen. Zo zie je dat er quotes gebruikt worden " en ' en dat de verschillende regels in de JavaScript code worden gescheiden door een punt-komma ; .
Ook zie je return true in de code staan. Dit moet je gebruiken, anders wordt gewoon de URL van de link getoond door de browser.
De code werkt goed, maar het kan nog beter. De omschrijving blijft namelijk in de statusbalk staan, ook wanneer je met de muis van de link af gaat. Dat is natuurlijk niet wenselijk en het kan irritant zijn voor bezoekers. Daarom nu een betere code. Door een lege string in onMouseOut te plaatsen, wordt de tekst in de statusbalk verwijderd als men de muis van de link af haalt:
<a href="http://www.homepage-maken.nl/index.php" onMouseOver="window.status = 'Klik hier om naar de beginpagina te gaan'; return true;" onMouseOut="window.status = ' ' ;" > >Home</a>
Het resultaat wordt nu als volgt:
Ga met de muis op de link staan en daarna er weer vanaf. De tekst zal getoond worden en weer verdwijnen als de muis van de link af gehaald wordt.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
