Cursor veranderen
| pointer | crosshair | text | wait |
| move | help | progress | default |
| n-resize | ne-resize | e-resize | se-resize |
| s-resize | sw-resize | w-resize | nw-resize |
| all-scroll | col-resize | row-resize | vertical-text |
| no-drop | not-allowed |
Hierboven zie je een tabelletje met veel gebruikte cursor-namen. Als je met de muis over een cel gaat, verandert de
cursor in een handje, een kruis, een draaiend rondje, of iets dergelijks.
Hier staat beschreven hoe je dat doet.
- Je bereikt dit effect door op de plaats waar je een andere cursor wilt, een STYLE-attribuut mee
te geven:
style="cursor:xxx"
Op de plaats van xxx vul je de keywords uit bovenstaande tabel in, bijvoorbeeld:style="cursor:pointer"
- Dit style-attribuut wordt door de meeste tags geaccepteerd. Het is een kwestie van proberen of het werkt.
- Je verandert de cursor voor een hele pagina door het style-attribuut in de BODY-tag te zetten.
- Je kunt de cursor-style ook opnemen in een style-tag of in een style-sheet.
- Het uiterlijk van de cursors zoals die op je scherm verschijnen hangt af van de cursor-instellingen in het operating 9system.
- Het werkt goed in de grote browsers op Microsoft Windows 10 en 11.
- Op Android zijn er wat afwijkingen: Bij Edge, FireFox en Chrome zijn de cursors 'progress' en 'wait' aan elkaar gelijk. In FireFox werkt het niet met de cursor 'move'; daar krijg je de default-cursor.
- Op Linux (Mint Cinnamon) zien de cursors er duidelijk anders uit dan bij Windows en Android. Met FireFox krijg je bij 'all scroll' de default-cursor. Bij 'vertical-text' krijg je een gewone verticale text-cursor in plaats van een horizontale, Bij 'no-drop' krijg je een 'pointer'.
N.B.: De tabel met cursors is niet volledig. Er zijn er meer. Zie bijvoorbeeld https://www.w3schools.com/jsref/prop_style_cursor.asp.
Gebruik:
- De code staat in de <BODY> als style-attribuut binnen een <style>-tag, of in de <HEAD> als onderdeel van een <style>-tag, een`class of een id.
De code ziet er als volgt uit:
(Voorbeelden van code in de <BODY>).
<span style="cursor:.....">........</span>
<p style="cursor:nw-resize">........</p>
<b style="cursor:wait">........</b>
<style>
.Kopje {
font-family : verdana, arial, helvetica, sans-serif;
font-size : 12pt; font-weight: bold;
color: #000099; text-decoration: underline;
cursor: pointer }
</style>
Opmerkingen:
Een manier om een standaard cursor te veranderen in een plaatje vind je in het item
Geanimeerde interactieve cursor.
Om in (heel erg) oude browsers de pointer-cursor goed te krijgen (het handje) gebruik je:
style="cursor:pointer;cursor:hand"
De volgorde is belangrijk: eerst pointer, daarna hand. Anders werkt het alsnog niet goed.
In moderne browsers kun je cursor:hand weglaten.
