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 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 system.
- Het werkt goed in de grote browsers op Microsoft Windows 10.
- Op Android is het een ander verhaal: het werkt helemaal niet met Edge. Bij FireFox en Chrome zijn de cursors 'progress' en 'wait' aan elkaar gelijk; in FireFox werkt het niet met de cursor 'move';
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) 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.
