Handleiding HTML - Voorbeelden cursor eigenschap

CSS		voorbeelden eigenschap	*cursor*

Handleiding HTML Legenda | Beschrijving | Gebruikersinterface | CSS eigenschappen | Begin

De cursor eigenschap kun je gebruiken, als je wilt dat de muisaanwijzer boven een bepaald element anders wordt weergegeven dan gebruikelijk. Gebruikelijk is bij de meeste browsers een dunne hoofdletter "i" boven tekst, een hand met een uitgestoken vinger boven een hyperlink, een pijl die naar linksboven is gericht boven de rest van het document en een pijl gecombineerd met een zandloper gedurende de tijd dat een document geopend wordt.

In het volgende voorbeeld worden de meeste waarden van de cursor eigenschap gedemonstreerd. In een tabel is met behulp van inline stijlen vastgelegd hoe de muisaanwijzer er moet uitzien, als je deze boven de verschillende omrande cellen schuift. De HTML-code voor de betreffende cellen heeft de volgende opbouw:

<TD STYLE="cursor: default;"> </TD>

Je kunt de cursor eigenschap met de waarde help bijvoorbeeld gebruiken als er extra informatie beschikbaar is in een tooltip. In het volgende voorbeeld is dat gedaan met behulp van een CLASS-selector met de naam "uitleg". De extra informatie is opgenomen als waarde van het TITLE attribuut.

De cursor eigenschap, die deel uitmaakt van CSS 2, kun je gebruiken om de weergave van de muisaanwijzer aan te passen.

In een stijlblok in de head van het document is voor de CLASS-selector een stijlregel opgenomen, waarin de cursor eigenschap is gebruikt met de waarde help. De border-bottom eigenschap zorgt voor een onderbroken lijn onder de tekst. Deze moet de bezoeker erop wijzen, dat er iets met de tekst aan de hand is.

.uitleg { cursor: help; border-bottom: 0.05em dashed; }

In plaats van de in de eerdere voorbeelden getoonde standaard muisaanwijzers kun je ook een eigen muisaanwijzer gebruiken. Je moet daarvoor de cursor eigenschap opnemen met de waarde uri.
Op dit moment worden eigen muisaanwijzers alleen ondersteund door Microsoft Internet Explorer 6.0 en hoger en geldt deze ondersteuning bovendien slechts voor afbeeldingen in de bestandsformaten "cur" en "ani".
Browsers die de waarde uri niet ondersteunen, geven de gebruikelijke muisaanwijzer weer.

In het volgende voorbeeld wordt een eigen muisaanwijzer gebruikt, die moet duidelijk maken dat je bij klikken op de link naar het CSS-gedeelte van de Handleiding HTML gaat.

<P<De <A HREF="cursor.html" STYLE="cursor: url(css.cur);">cursor</A> eigenschap met de waarde uri zorgt ervoor dar een eigen muisaanwijzer boven de hyperlink wordt weergegeven.

De cursor eigenschap met de waarde auto gebruik je als je wilt dat de browser de voor het element gebruikelijke muisaanwijzer weergeeft en niet de muisaanwijzer die je in een stijlregel in een stijlblok of extern stijlblad hebt opgegeven.

In het volgende voorbeeld is in het een stijlblok een stijlregel opgenomen voor het BLOCKQUOTE element, die ervoor zorgt dat de muisaanwijzer een pijl met een vraagteken is. De bezoeker kan hieruit afleiden dat er extra informatie beschikbaar is, bijvoorbeeld in de vorm van een tooltip.

BLOCKQUOTE { cursor: help; }

Wanneer de extra informatie met betrekking tot de inhoud van een bepaald BLOCKQUOTE element niet beschikbaar is, dan is het niet handig de opgegeven muisaanwijzer te gebruiken. De bezoeker zou daarmee immers op het verkeerde been worden gezet. In deze specifieke situatie definieer je daarom een inline stijl voor het BLOCKQUOTE element en geeft daarin de cursor eigenschap de waarde auto.

<BLOCKQUOTE TITLE="Deze tekst komt uit ...">Voor dit citaat is in een tooltip te zien wat de bron is.</BLOCKQUOTE> <BLOCKQUOTE STYLE="cursor: auto"> Voor dit citaat is geen nadere informatie in een tooltip beschikbaar.</BLOCKQUOTE>

Legenda | Beschrijving | Gebruikersinterface | CSS eigenschappen | Begin