Homepage » Tutorials » HTML & CSS » Verander je muisaanwijzer

Verander je muisaanwijzer

Info 
Door: Grubolsch Moeilijkheidsgraad: 1/3
Views:21.855Reacties: 7(Bekijken)
  Log in om zelf te reageren
 Waardering:6.8/10 (4 stemmen)

Gerelateerde items

Uitgebreide cursus CSS




Heb jij ook nooit de cursor (muisaanwijzer) willen laten veranderen in iets leuks? In iets flashy bewegend? Of eerder in een droog informatief wijzertje? Mischien een vraagteken boven alle links die woorden verklaren? Wel... het kan!
Je kan dit doen door een heel simpel stukje CSS.

Je hebt een aantal vaste wijzers, waarnaar je kan verwijzen via "cursor":

Zo kan je boven een link een vraagteken laten verschijnen door:

#Code
1
<a href='http://www.grubolsch.ssr.be/' style='cursor:help'>De beste webmaster van zijn eigen huis!</a>


Bij tekeningen werkt het exact hetzelfde, deze keer doen we het met een "crosshair".

#Code
1
<img src='http://www.mandragon.be/gfx/upimg/20031016dwarf.gif' style='cursor:crosshair'>


Er zijn ook nog:
-default (de standaard cursor)
-auto (De PC bepaalt zelf de cursor aan de hand van de context waarop de muis staat)
-pointer
-move
-text
-wait
-(e/ne/nw/n/se/sw/s/w)-resize

Uiteraard kan je ook je cursor veranderen in een EIGEN cursor.
Je moet dan wel die cursor in je eigen webspace hebben opgeslagen, in dezelfde map als je HTML-file's.
De einde-extensies van cursors zijn ".ani" (bewegende wijzers) en ".cur" (niet bewegende). Met een ".gif" of ".jpg" werkt het niet.
Je kan een eigen cursor instellen door "cursor: url()" in je CSS te zetten, waarbij tussen haakjes de naam van de ani/cur met de extensie komt, en eventueel het absolute of relatieve pad.

Dus bijvoorbeeld:

#Code
1
<a href='about:blank' style='cursor:url(NAAM.ani)'>Het bewijs dat het beste design niets zonder inhoud is!</a>


Het is tevens mogelijk om het voor de hele pagina in te stellen, dat de muis verandert.
Dit kan men doen door in de <head></head> tussen <style></style> tags het volgende te typen:

#Code
1
2
3
4
5
6
7
<head>
<style>
* {
cursor: url(NAAM.ani) ;
}
</style>
</head>


Het spreekt voor zich dat je ook naar een externe stylesheet kan verwijzen, en dat dan de <head></style>-tags wegvallen.
Dit doe je door de code:
#Code
1
<link rel="StyleSheet" href="stijl.css">

Hiervoor kan je ook de begincursus van css raadplegen

Zo, mijn eerste tut terug van weggeweest.
Opmerkingen, vraagjes, of gewoon bedankjes :wink: mogen altijd hier!
Hoop dat jullie hier iets aan hebben!

7 reacties
niemand Geplaatst op 13-10-2008 om 21:16
 

Regular		 De basiscursor 'pointer' is da ni hetzelfde als de
basis-cursor 'hand' ?
mouse_c4 Geplaatst op 28-11-2007 om 19:26
 

Regular		 ik snap hem even niet kan iemand mij even iets uitleggen want in heb in photoshop cs3 een plaatje gemaakt, en opgeslagen als curser.cur en als ik dat heb gedaan dan kopieer dat scripje van jullie maar dan werkt hij niet op mijn website en alles heb ik op de juiste plek staan denk ik :S
heavendies Geplaatst op 05-11-2007 om 14:24
 

Regular		 Quote:

iemand een site waar ik cursors kan downloaden. Ben bezig voor een bandsite om een "metal" handje als muis aanwijzer te gebruiken. Maar kan hem niet zo snel vinden.



op de site van large.be kan je een voorbeeldje zien. misschien dat je het daar ook kan rippen of kopieren? Probeer het eens uit!!!
Grubolsch Geplaatst op 04-10-2007 om 16:08
 

Moderator		 Heb je een JS libary voor nodig. Typ dat maar eens in op google en je komt er wel.
stinohomepage Geplaatst op 07-08-2007 om 11:20
 

Regular		 Weet iemand hoe je een vraagteken boven je tekst kan plaatsen en dat er dan bij een mouseover een klien geel vierkantje met de uitleg komt.
iets als een tekst met een title en ee vraagteken erboven bij mouseover

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be