Knop die van kleur verandert als je er met de muis overheen gaat
Hieronder zie je twee knoppen. Als je er met de muis overheen gaat veranderen de kleuren van de achtergrond
en van de tekst. Hier staat beschreven hoe je dat aanpakt.
Je kunt de knoppen aanklikken; ze hebben geen bijzondere functie.
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden voor eigen gebruik.
- de code bestaat uit twee delen:
- Een <style> om de knoppen hun uiterlijk te geven.
- De definitie van de knoppen zelf, met daarbij de code om ze van kleur te veranderen.
- De <style> bevat de code waarmee de bovenste knop groen, en de onderste knop geel wordt gemaakt. Merk op dat het lettertype op de knoppen afwijkt van de rest van de bladzijde.
- De <style> bevat twee id's (#B0 en #B1), een voor elke knop. Hier
worden ingesteld:
- De grootte van de letters (font-size 16 pixels)
- Het font (font-family Comic Sans MS)
- Het uiterlijk (font-style italic; cursief dus)
- De kleur van de tekst (color #ffffff; wit, resp. #000000; zwart)
- De kleur van de achtergrond (background-color #008000; groen resp. #ffff00; geel)
- Dit werkt zowel met <button>-tags als met <input>-tags in een <form>.
Beide methodes worden hier gebruikt. Knop 1 is gemaakt met een <button>-tag, Knop 2 is gemaakt met <input>.
- De twee knoppen hebben elk een eigen ID, waarmee aan de <style> wordt gerefereerd. Dat gebeurt
met het attribuut id="B0" bij Knop 1 en met ID="B1" bij knop 2.
Het is noodzakelijk om dit met id's te doen. Met classes werkt het niet. - De knoppen zijn beide van het type "button". Ze 'doen' dus niets, tenzij dat door een event-handler
wordt ingezet. Hier is onClick gebruikt, waardoor een alert wordt gegeven.
- De knoppen reageren op de muis door de event-handlers onMouseOver en onMouseOut.
- Bij onMouseOver worden de attributen color en background-color gewijzigd, van de style die de knop gebruikt. Er wordt naar de style van het huidige object verwezen door gebruik te maken van this.style.color en this.style.backgroundColor.
- Het keyword this verwijst naar het browser-object waarin this wordt gebruikt. In dit geval dus een knop.
- De kleur van de tekst en de achtergrond worden als volgt veranderd door onMouseOver:
- Knop 1:
tekstkleur verandert van #ffffff (wit) in #000000 (zwart)
achtergrondkleur verandert van #008000 (groen) in #00ffff (cyaan) - Knop 2:
tekstkleur verandert van #000000 (zwart) in #ffffff (wit)
achtergrondkleur verandert van #ffff00 (geel) in #ff0000 (rood)
- Knop 1:
Gebruik:
- De <style> staat in de <HEAD>.
- De knoppen definieer je in de <BODY> op de plaats waar je ze nodig hebt.
De code ziet er als volgt uit:
(Zet deze code in de <HEAD>)
<style>(Zet deze code in de <BODY>. Methode met <button>-tag.)
#B0 { font-size : 16px; color:#ffffff; background-color : #008000;
font-family : "Comic Sans MS"; font-style : italic; }
#B1 { font-size : 16px; color:#000000; background-color : #ffff00;
font-family : "Comic Sans MS"; font-style : italic; }
</style>
<button name="Begin" type="button" title="Klik mij!!"(Zet deze code in de <BODY>. Methode met <input>-tag in een <form>.)
id="B0" onClick="window.alert('Dit was Knop 1')"
onMouseOver="this.style.color='#000000';this.style.backgroundColor='#00ffff';"
onMouseOut="this.style.color='#ffffff';this.style.backgroundColor='#008000';">
Knop 1</button>
<form>
<input type=button title="Klikken mag maar hoeft niet"
id="B1" value="Knop 2" onClick="window.alert('Dit was Knop 2')"
onMouseOver="this.style.color='#ffffff';this.style.backgroundColor='#ff0000';"
onMouseOut="this.style.color='#000000';this.style.backgroundColor='#ffff00';">
</form>
Downloaden:
Druk op de knop:
File: voorb077.zip, 598 bytes.
Opmerking:
Zie ook het item: "Knop met tekst of een plaatje".
Merk op dat deze techniek heel anders is dan in de linker kolom wordt gebruikt. Hier wordt het uiterlijk
van een knop aangepast. In de linker kolom worden plaatjes gebruikt die worden verwisseld als de muis
er overheen gaat. Zie het item "Plaatje laten veranderen
als de muis er over gaat".
De hier besproken techniek kun je ook toepassen op bijvoorbeeld teksten. Zie het item "Lettergrootte en -opmaak wijzigen".
