Innhold
- Grunnleggende musemarkører
- Tilpassede musmarkører
- Endrer markørstilen med Inline Javascript
- Spiller med funksjoner
Endring av musemarkøren er en enkel måte å legge til spesialeffekter på websiden din. Dette kan forbedre brukervennligheten ved å gi brukerne ekstra visuelle hjelpemidler, spesielt på mer komplekse sider som spill og interaktive kart. Du kan bruke Javascript til å endre markør stilen i henhold til datoen, været og alt annet. Teknikken med å bruke Javascript, HTML og CSS for å lage dynamiske nettsider er kjent som DHTML (Dynamic HTML).
Grunnleggende musemarkører
Det finnes flere standardmusemarkører som kan brukes ved å endre stilen til et element eller siden på siden. Navnene er standard, krysshår, hånd, flytte, tekst, vent og hjelp. Se linken "CSS Markøregenskaper" i "Ressurser" -delen for mer informasjon om dem. Bruk CSS til å definere markøren som skal vises når du overfører et element som følger:
Kors
Tilpassede musmarkører
I tillegg til de grunnleggende markørene kan du bruke egendefinerte maler ved å angi adressen til en bildefil som markørstil, som i følgende eksempel:
Tilpasset markør
Ikke alle nettlesere støtter denne funksjonen eller alle filtyper. For eksempel forventer Internet Explorer filer med ".cur" eller ".ani" -utvidelse. Firefox aksepterer ikke animerte markører (".ani") og forventer en grunnleggende markør utover bildet. For best resultat, angi en markørfil (". Cur" eller ".ani"), en bildefil (PNG, JPEG eller GIF) og en grunnleggende markørtype som en sikkerhetskopi. Følgende eksempel bruker en animert markør som førstevalg, en enkel fil i andre plass og den grunnleggende markøren som det siste alternativet. Nettleseren vil prøve alle alternativene til du finner en du kan bruke:
Tilpasset markør
Open Cursor Library i Resources-delen inneholder samlinger av gratis musepekere.
Endrer markørstilen med Inline Javascript
Du kan endre CSS-stilen til markøren ved hjelp av Javascript. Det er flere HTML-attributter relatert til mushandlinger som kan brukes til å utføre kode ved å klikke, flytte eller sveve over et sideelement. Noen eksempler er:
onmouseover: Musepekeren passerer over et element. Onmousedown: Museknappen er trykket. onmouseup: Museknappen er utgitt. onmouseout: Musepekeren går ut av elementet. ondblclick: Brukeren dobbeltklikker musen.
I delen "Attributter" i delen "Attributter" finner du flere attributter du kan bruke til å legge til handlinger med Javascript.
Legg til en handling for en hendelse (for eksempel "mouseover") ved å angi koden du vil kjøre som verdien av attributten. I eksemplet nedenfor endres markøren til "hjelp" ved å svinge over koblingen.
Hjelp
Spiller med funksjoner
Noen ganger vil du gjøre mer enn ett attributt tillater. Ved å skrive alle handlingene i en Javascript-funksjon, kan du sette all koden øverst i HTML-dokumentet ditt og bruke det til et hvilket som helst element ved å ringe i tilfeldighetsattributtet. Følgende kode endrer markøren på elementet bestått som parameter "el":
funksjon setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}
Funksjonen vil bli plassert i skriptdelen av dokumentoverskriften (mellom kodene
og ) eller i en ekstern kodefil som er referert i samme del. For å bruke det, ring funksjonen med søkeordet "dette" fra et hendelseattributt i en HTML-kode. Funksjonen vil få en referanse til elementet som er tilknyttet museventyret, og vil endre markørstilen. Hvis for eksempel pekeren hopper over følgende tekst, endres markøren:Markøren endres på denne lenken
Du kan også endre hovedpekeren som vises når du svinger over bunnen av siden. Følgende funksjon lar deg endre markøren til typen som er angitt i parameteren "curtype":
funksjon setMainCursor (curtype) {switch (curtype) {tilfelle "loading": document.body.style.cursor = "url (working.ani), url (working.png), vent"; bryt GO-saken "forbudt": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), standard"; bryt GO-tilfelle "standard": standard: document.body.style.cursor = "url (pil.cur), standard" GO}}
For å bruke det, ring det "loading", "forbudt" eller "standard" fra et hendelseattributt i en HTML-tagg. For eksempel, vil følgende knapp endre markøren til "lasting" når du klikker:
Javascript-språket har ubegrenset funksjonalitet. Koden nedenfor vil telle ned og hvert sekund vil endre musepekeren til et bilde som er knyttet til gjeldende verdi. Funksjonen "setTimeOut" vil la funksjonen bli suspendert i ett sekund før du blir tilbakekalt og oppdatert telleren.
funksjon doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (pil.cur), standard" GO}}
På nettsiden, bruk funksjonen til å vise tellingen på musemarkøren når du klikker på en knapp på et skjema.