Ændring af et Mouse Pointer i Javascript

Ændring musemarkøren er en enkel måde at peppe op din webside med cool specielle effekter.Musemarkøren stilarter kan forbedre din webside anvendelighed ved at give dine brugere med ekstra visuel feedback, især for mere komplekse scriptede websider som spil og interaktive kort.JavaScript kan bruges modificere musemarkøren stil, så du kan ændre musemarkøren baseret på dags dato, vejret rapport eller næsten noget andet, du kan forestille dig.Teknikken med at bruge Javascript, HTML og CSS sammen om at skabe dynamiske websider er DHTML (Dynamic HTML).

Basic Mouse Markører

  • Der er flere standard musemarkører, der kan bruges ved at ændre stilen i en side element eller dokument krop.Disse cursor stilarter omfatter standard kryds, hånd, flytte, tekst, wai og hjælp.Se "CSS cursor ejendom" forbundet i afsnittet Ressourcer for alle detaljer om alle de grundlæggende markøren stilarter.Vises Markøren stil, når svæver over et element kan indstilles ved hjælp CSS, som i dette eksempel:

    & lt; en style = \ "cursor: trådkors \" href = \ "# \" & gt; Cross-hår & lt; / a & gt;

Brugerdefineret Mouse Markører

  • Ud over de grundlæggende markører, kan brugerdefinerede markører bruges ved at sætte cursoren stil til adressen på en markør-fil eller et billede, som i følgende eksempel:

    & lt; en stil= \ "cursor: URL (arrow.cur), standard \" href = \ "# \" & gt; Brugerdefineret markøren & lt; / a & gt;

    Browser støtte til markøren stilarter og filtyper er inkonsekvent.For eksempel Internet Explorer forventer cursor filer med .cur eller .ani udvidelser.Firefox kan ikke lide animerede markører (.ani-filer), og forventer en grundlæggende markør at blive opført i tillæg til markøren eller billedfil.For de bedste resultater blandt browsere, giver en markør fil (.cur eller .ani), en billedfil (PNG, JPEG eller GIF), og en grundlæggende markør type som en fallback.Dette eksempel bruger en animeret cursor for sin første valg, en almindelig markør fil som det andet valg og standard grundlæggende markør som den endelige fallback mulighed.Browseren vil forsøge hver indstilling, indtil den finder en det kan bruge.

    & lt; en style = \ "cursor: URL (arrow.ani), URL (arrow.cur), standard \" href = \ "# \" & gt; Brugerdefineret markøren & lt; / a & gt;

    Den "Open Cursor Library" forbundet i afsnittet Ressourcer tilbyder gratis, no-bøvl musemarkøren samlinger.

Ændring af Cursor stil med Inline Javascript

  • Du kan ændre musemarkøren CSS stil med Javascript.Der er flere HTML-attributter relateret til musen handlinger, som du kan bruge til at udføre Javascript når musen klikkes, flyttes eller svævede over en webside element.Et par af disse attributter er:

    onmouseover: Mus pointer svæver over elementet
    onmousedown: knap Mus pressede
    onmouseup: knap Mus udgivet
    onMouseOut: flytter musepilen fra af elementet
    onclick: knap Mus klikket
    ondblclick: knap Musdobbelt klikkede

    Se linket "Event attributter" i afsnittet Ressourcer for mere begivenhed attributter du kan bruge til at tilføje Javascript handlinger.

    Tilføj en Javascript handling til en begivenhed, såsom en mus-over, blot ved at sætte attribut værdi til Javascript-kode, du ønsker udført.I dette eksempel er markøren ændres til den grundlæggende "hjælp" cursor, når musen svæver over linket:

    & lt; en onmouseover = \ "this.style.cursor = 'Hjælp'; \" href = \ "# \"& gt; Hjælp & lt; / a & gt;

Sjov med funktioner

  • Nogle gange, du ønsker at gøre mere end komfortabelt passer ind i en mus action attribut.Ved at skrive alle dine handlinger i en Javascript funktion, kan du proppe al din kode i toppen af ​​dit HTML-dokument, og få din cursor magi til at ske med en simpel funktion opkald i attribut begivenhed.Denne enkle Javascript funktion ændrer markøren stil for den webside element gået ind som parameter "el":

    funktion setElementCursor (el) {
    el.style.cursor = \ & amp; quot; URL (3DArrow.cur), trådkors \ & amp; quot;

    GO

    }

    Denne funktion er beliggende i et script sektion i overskriften på dokumentet (mellem & lt; head & gt; og & lt; / head & gt; tags), eller i en ekstern Javascript-kode-fil henvises til i overskriften på dokumentet.For at bruge denne funktion, kalder funktionen med søgeordet "denne" fra en begivenhed attribut i et HTML-tag.Funktionen modtager en henvisning til websiden element forbundet med musehændelsen, og ændrer markøren stil.For eksempel, når musemarkøren bevæger sig over denne sammenkædede tekst, vil den viste markør indstilles af funktionen:

    & lt; en onmousemove = \ "javascript: setElementCursor (dette); \" href = \ "# \" & gt;Sæt markøren til dette link & lt; / a & gt;

    Du kan også ændre den vigtigste markør, der vises, når markøren svæver over websiden baggrunden.Denne Javascript funktion, der sætter musemarkøren for de vigtigste webside krop baseret på værdien gået ind funktionen som parameteren "curtype":

    funktion setMainCursor (curtype) {
    kontakt (curtype) {
    tilfælde \ & amp; quot; lastning\ & amp; quot;: Document.body.style.cursor = \ & amp; quot; URL (working.ani), URL (working.png), vent \ & amp; quot;;bryde

    GO

    sagen \ & amp; quot; forbudt \ & amp; quot ;: document.body.style.cursor = \ & amp; quot; URL (unavailable.ani), URL (unavailable.png), default \ & amp; quot;;bryde

    GO

    sagen \ & amp; quot; standard \ & amp; quot ;:
    standard: document.body.style.cursor = \ & amp; quot; URL (arrow.cur), default \ & amp; quot;

    GO

    }
    }

    at bruge denne funktion, kalder funktionen med værdien "loading", "forbudt" eller "default" fra en begivenhed attribut i et HTML-tag.For eksempel dette certifikat knap kalder funktion til at indstille markøren til "loading", når der klikkes på knappen:

    & lt; input type = \ "send \" onclick = \ "javascript: setMainCursor (" belastning "); \"/ & gt;

    Der er ingen grænse for, hvad du kan gøre med JavaScript-funktioner.Følgende funktion udfører en nedtælling ved at ændre vigtigste musemarkøren hvert sekund til en markør billede der er tilknyttet den aktuelle tælling.Den setTimeout funktionen bruges til at forårsage den funktion til at sove i et sekund, før det kaldes igen med den opdaterede tæller.

    funktion doCountdownCursor (tæller) {
    document.body.style.cursor = \ & amp; quot; URL (\ & amp; quot; + count + \ & amp; quot; .ani), URL (\ & amp; quot; + count +\ & amp; quot; .png), vent \ & amp; quot;

    GO

    count--

    GO

    hvis (tæller & gt; 0) {
    setTimeout (\ & amp; quot; doCountdownCursor (\ & amp; quot; + count + \ & amp; quot;) \ & amp; quot ;, 1000)

    GO

    }
    else {
    document.body.style.cursor = \ & amp; quot; URL (arrow.cur), default \ & amp; quot;

    GO

    }
    }

    På websiden, skal du bruge denne funktion til at få musemarkøren tælle ned fra 10, når en formular indsende der klikkes på knappen.

    & lt; input type = \ "send \" onclick = \ "javascript: doCountdownCursor (10); \" / & gt;

Ressourcer

  • CSS Cursor Ejendom
  • Begivenhed attributter
  • Open Cursor Library
741
0
2
Java Script Programmering