Knop met tekst of een plaatje

Hier staat beschreven hoe je een tekstknop in windows-style kunt maken. Je kunt er ook een plaatje in zetten, in plaats van tekst. Zelfs bewegende plaatjes zijn mogelijk.

• Om de knoppen daadwerkelijk iets te laten doen heb je meestal JavaScript nodig.
   
• Een knop kun je op twee manieren maken:
  • Met de tag <input type="button">. Dit gebruik je gewoonlijk in een formulier met de tag form. Het is hier bijvoorbeeld mogelijk om een knop zo in te stellen dat alle velden van het formulier worden gewist (type="reset"), of dat je de inhoud van het formulier overdraagt voor verdere behandeling door een script of server (type="submit").
    Dit type knop kan alleen tekst hebben.
  • Met de tag button kun je alles doen wat je ook met <input> kunt. Je bent hier echter veel vrijer om de knop op te maken. Eigenlijk kun je alles op de knop afbeelden wat je ook in je HTML-document kunt laten zien.
  • Je koppelt een actie aan een knop door een "event-handler" te activeren in de tag.
    Een voorbeeld van een event is het aanklikken van de knop met de muis. Dit is het event "onClick". De bijbehorende event-handler activeer je door in de tag op te nemen: onClick=".....".
    Een event-handler is een stukje programma (geschreven in JavaScript) dat wordt gestart als er op de knop wordt geklikt. Hierdoor reageert de knop.
  • Voorbeeld: de code
     
    <div style="text-align:center">
<button name="knop2" value="Voorbeeld" type="button" onClick="alert('Klik!')"
onMouseOver="document.getElementById('comment').innerHTML='De muis staat op de knop'"
onMouseOut="document.getElementById('comment').innerHTML='De muis staat niet meer op de knop'">
<img src="../images/ohwell.gif" border="0">&nbsp;&nbsp;Klik mij!&nbsp;&nbsp;
<img src="../images/ohwell.gif" border="0"></button>
</div>
<div id="comment" style="text-align:center">De muis staat niet op de knop</div>
     
    maakt de knop hieronder. Als je er op klikt verschijnt een alert. Als je de muis erover beweegt verandert de tekst onder de knop.
    Er zijn non-breaking spaces (&nbsp;) gebruikt om de ruimte tussen de tekst en de plaatjes te maken.
     
      Klik mij!  
    
    
    De muis staat niet op de knop
    
    
  • De attributen name en value heb je o.a. nodig als de knop onderdeel is van een formulier.
    Dit geldt ook voor het (hier niet gebruikte) attribuut id.
  • De event-handlers die je met een button kunt gebruiken zijn:

    onClick	Klik op de button
    onDblClick	Dubbel-klik op de button
    onMouseOver	Muis-aanwijzer op de button.
    onMouseMove	Muis-aanwijzer beweegt op de button.
    onMouseOut	Muis-aanwijzer niet (meer) op de button.
    onMouseDown	Reactie als de muis-knop wordt ingedrukt.
    onMouseUp	Reactie als de muis-knop wordt losgelaten.

  Opmerking:
   
  Zie ook het item: "Terug- en Vooruit-knop".
   
  Zie ook de items "Knop met commentaar in een venster".
   
  Zie ook het item: "Knop die van kleur verandert als je er met de muis overheen gaat".