Knop met commentaar in een venster
Een Tooltip is een klein venstertje met tekst dat verschijnt als je met de muis over -bijvoorbeeld- een plaatje
beweegt. Tooltips zijn handig om knoppen van commentaar te voorzien. Maar sommige mensen stellen hun browser zo in dat
de tooltips niet zichtbaar worden gemaakt.
Hier vind je een methode waarmee je een knop kunt voorzien van commentaar dat in een venster verschijnt als je er met
de muis overheen gaat.
De code staat onderaan deze pagina. Je kunt hem ook downloaden.
- Deze bespreking beperkt zich tot de tag <input type="button"> in een <form>, maar
kan ook worden gebruikt met de tag <button>.
- Er wordt gebruik gemaakt van de event-handlers onMouseOver en onMouseOut die als attribuut aan de <INPUT>-tag worden meegegeven. De event-handlers roepen de JavaScript function VensterTekstaan; deze zorgt voor het veranderen van de tekst in het venster.
- Het venster is onderdeel van een <form>. Omdat het alleen als uitvoermedium wordt gebruikt heeft het het attribuut readonly.
- De referentie van de JavaScript function VensterTekst naar het venster in het formulier verloopt via de namen Knoppen en Uitvoer.
- Je kunt dit ook gebruiken in "gewone" links met tekst of een plaatje.
Hieronder kun je een en ander uitproberen. Als je de muis-aanwijzer over de knoppen beweegt, verandert de tekst in het venster.
De knoppen zelf hebben geen functie.
Als de de knoppen een functie wilt geven doe je dat met de event-handler onClick. Zie het item
"Knop met tekst of een plaatje".
Gebruik:
- De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.
(Zet dit JavaScriptje bij voorkeur in de <HEAD>)
<script>(Zet deze code in de <BODY> op de plaats waar venster en knoppen moeten komen; De code voor slechts één knop wordt hier getoond)
function VensterTekst(str) {
document.Knoppen.Uitvoer.value=str;
}
</script>
<div align="center">
<form name="Knoppen">
<input type="text" name="Uitvoer"
value="De muis bevindt zich niet boven een knop"
size="40" readonly><br> <br>
<input type="button" name="Knop1" value="Knop 1"
onMouseOver="VensterTekst('De muis bevindt zich boven knop 1')"
onMouseOut="VensterTekst('De muis bevindt zich niet boven een knop')">
</form>
</div>
Downloaden:
Druk op de knop:
File: voorb061.zip, 539 bytes.
Opmerking:
Zie ook het item "Knop met commentaar in de statusbalk".
