Ändra en muspekare i Javascript

Ändra muspekaren är ett enkelt sätt att jazz upp din hemsida med coola specialeffekter . Muspekare stilar kan förbättra din webbsida användbarhet genom att ge dina användare med extra visuell feedback , särskilt för mer komplexa manus webbsidor som spel och interaktiva kartor . Javascript kan användas modifiera stilen muspekaren , så att du kan ändra musmarkören utifrån dagens datum , den väderrapporter eller nästan allt annat du kan tänka dig . Tekniken att använda Javascript , HTML och CSS tillsammans för att skapa dynamiska webbsidor är DHTML ( Dynamic HTML ) . Grundläggande mus Markörer
p Det finns flera förinställda musmarkörer som kan användas genom att ändra stilen på ett sidelement eller dokument kroppen . Dessa Markören stilar inkluderar standard , crosshair , hand, drag , text , wai och hjälp. Se " CSS markören Property " länkad i avsnittet Resurser för fullständig information om alla grundläggande markören stilar . Markören stilen visas när svävar över ett element kan ställas in med hjälp av CSS , som i detta exempel :

Cross - hair < /a >
anpassade Mus markörer

Förutom de grundläggande markörer , kan anpassade markörer användas genom att ställa markören stil till adressen för en markör fil eller bild , som i följande exempel :

Anpassad markör < /a>

Browser stöd för markören stilar och filtyper är inkonsekvent . Till exempel räknar Internet Explorer markören filer med . Nuvarande eller . Förlängningar ani . Firefox gillar inte animerade markörer ( . Ani -filer ) , och förväntar sig en grundläggande markör för att listas i tillägg till markör eller bildfil . För bästa resultat bland webbläsare , ge en markör fil ( . Nuvarande eller . Ani ) , en bildfil ( PNG , JPEG eller GIF ) , och en grundläggande markör typ som en reservlösning . Detta exempel använder en animerad markören för sitt första val , en vanlig markör fil som andra val och standard grundläggande markören som sista reservalternativ . Webbläsaren försöker varje alternativ tills den hittar en man kan använda .

, Anpassad markör < /a>

" Open Cursor Library " länkad i avsnittet Resurser erbjuder gratis , inget krångel samlingar muspekaren Addera ditt Ändra markör Style . med Inline Javascript

Du kan ändra musmarkören CSS med Javascript . Det finns flera HTML-attribut relaterade till musåtgärder du kan använda för att köra Javascript när musen klickas , flyttas eller svävade över en webbsida inslag . Några av dessa egenskaper är :

onMouseOver : muspekaren svävar över elementonmousedown : Musknapp pressedonmouseup : Musknapp releasedonmouseout : Muspekaren flyttas bort av elementonclick : Musknapp clickedondblclick : musknapp dubbel klickade

Se " händelse attribut " länken i avsnittet Resurser för fler evenemang attribut du kan använda för att lägga till JavaScript-åtgärder .

Lägg ett Javascript åtgärd till en händelse , till exempel en mus - over , helt enkelt genom att ställa in attributets värde till Javascript-kod som du vill exekveras . I detta exempel är markören ändras till den grundläggande " hjälp " markör när musen svävar över länken :

< a onMouseOver = " this.style.cursor = " hjälp " , " href = "# " > Hjälp < /a > Addera Kul med funktioner

Ibland , du vill göra mer än bekvämt passar i en musåtgärd attribut . Genom att skriva alla dina handlingar i en Javascript -funktion , kan du klämma all kod på toppen av din HTML- dokument , och få din markör magi att hända med en enkel funktion samtal i händelse attributet . Denna enkla Javascript funktion ändrar markören stil för webbsidan elementet gått in som parameter "el " :

funktion setElementCursor ( el ) { el.style.cursor = "url ( 3DArrow.cur ) , hårkors " ; }

Denna funktion ligger i ett manus avsnitt i huvudet på dokumentet ( mellan och taggarna ) , eller i en extern Javascript-kod fil refereras i sidhuvudet på dokument. För att använda denna funktion anropa funktionen med sökordet " detta " från en händelse attribut i en HTML- tagg . Funktionen tar emot en hänvisning till webbsidan elementet associerat med musen händelsen , och ändrar sin markör stil . Till exempel , när muspekaren rör sig över denna länkad text kommer markören visas fastställas av funktionen :

Ställ markören för denna länk < /a>

Du kan också ändra den viktigaste markören som visas när markören svävar över webbsidans bakgrund . Denna JavaScript-funktion som sätter muspekaren för den huvudsakliga webbsida kropp baserat på värdet passerat in funktionen som parameter " curtype " :

funktion setMainCursor ( curtype ) { switch ( curtype ) { case " loading " : document.body.style.cursor = "url ( working.ani ) , URL ( working.png ) , vänta " , break; case " förbjudet " : document.body.style.cursor = "url ( unavailable.ani ) , URL ( unavailable.png ) , default " , break; case " default " : default : document.body.style.cursor = " url ( arrow.cur ) , default " ; } }

att använda denna funktion , anropa funktionen med värdet " lastning , " förbjudet " , " eller " default " från en händelse attribut i en HTML- tagg . Till exempel det här formuläret skicka-knappen anropar funktionen för att ställa markören på " loading " när du klickar på knappen :

< input type = " submit" onclick = " javascript : setMainCursor ( " loading " ) ; " />
p Det finns ingen gräns för vad du kan göra med JavaScript -funktioner . Följande funktion utför en nedräkning genom att ändra den huvudsakliga muspekaren varannan till en markör bild som är associerad med den aktuella räkningen . SetTimeout funktionen används för att få funktionen att sova för en sekund innan det kallas på nytt med det uppdaterade räkningen .

Funktion doCountdownCursor ( count ) { document.body.style.cursor = "url ( " + count + " . ani ) , url ( " + count + " . png ) , vänta " , count - , if ( tal> 0 ) { setTimeout ( " doCountdownCursor ( " + count + " ) " , 1000 ) ; } else { document.body.style.cursor = "url ( arrow.cur ) , default " ; } }

på webbsidan kan du använda denna funktion för att ha muspekaren räkna ned från 10 när ett formulär skicka-knapp klickas .

Addera