Innehåll
- Grundläggande musmarkörer
- Anpassade musmarkörer
- Byter markörstil med Inline Javascript
- Spelar med funktioner
Att byta muspekare är ett enkelt sätt att lägga till specialeffekter på din webbsida. Detta kan förbättra användbarheten genom att ge användarna extra visuella hjälpmedel, särskilt på mer komplexa sidor som spel och interaktiva kartor. Du kan använda Javascript för att ändra markörstil enligt datum, vädret och allt annat. Tekniken att använda Javascript, HTML och CSS för att skapa dynamiska webbsidor är känd som DHTML (Dynamic HTML).
Grundläggande musmarkörer
Det finns flera standardmuspekare som kan användas genom att ändra stilen på ett element eller sidans kropp. Namnen är standard, crosshair, hand, flytta, text, vänta och hjälp. Se länken "CSS Cursor Property" i avsnittet "Resurser" för mer information om dem. Använd CSS för att definiera markören som kommer att visas när du överför ett element enligt följande:
KORSHÅRSSIKTE
Anpassade musmarkörer
Förutom de grundläggande markörerna kan du använda anpassade mallar genom att ange adressen till en bildfil som markörstil, som i följande exempel:
Anpassad markör
Alla webbläsare stöder inte den här funktionen eller alla filtyper. Till exempel förväntar Internet Explorer filer med ".cur" eller ".ani" -tillägg. Firefox accepterar inte animerade markörer (".ani") och förväntar sig en grundläggande markör bortom bilden. För bästa resultat, ange en markörfil (". Cur" eller ".ani"), en bildfil (PNG, JPEG eller GIF) och en grundläggande markörtyp som säkerhetskopia. Följande exempel använder en animerad markör som förstahandsvalet, en enkel fil i andra hand och den grundläggande markören som det sista alternativet. Webbläsaren kommer att försöka alla alternativ tills du hittar en du kan använda:
Anpassad markör
Open Cursor Library i avsnittet Resurser erbjuder samlingar av gratis muspekare.
Byter markörstil med Inline Javascript
Du kan ändra markörens CSS-stil med Javascript. Det finns flera HTML-attribut relaterade till musåtgärder som kan användas för att utföra kod genom att klicka, flytta eller sväva över ett sidelement. Några exempel är:
onmouseover: Muspekaren passerar över ett element. onmousedown: musknappen trycks ned. onmouseup: Musknappen är släppt. onmouseout: Muspekaren lämnar elementet. ondblclick: Användaren dubbelklickar musen.
I avsnittet "Attribut" i avsnittet "Attribut" hittar du fler attribut som du kan använda för att lägga till åtgärder med Javascript.
Lägg till en åtgärd till en händelse (till exempel "mouseover") genom att ange koden som du vill köra som värdet på attributet. I exemplet nedan ändras markören till "hjälp" genom att sväva över länken.
Hjälp
Spelar med funktioner
Ibland vill du göra mer än ett attribut tillåter. Genom att skriva alla åtgärder i en Javascript-funktion kan du placera all koden längst upp i ditt HTML-dokument och tillämpa det på något element genom att ringa i händelsen. Följande kod ändrar markören på elementet passerat som parameter "el":
funktion setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}
Funktionen kommer att ligga i skriptavsnittet i dokumenthuvudet (mellan taggarna
och ) eller i en extern kodfil som hänvisas till i samma del. För att använda det, ring funktionen med sökordet "this" från en händelseattribut i en HTML-tagg. Funktionen kommer att få en hänvisning till det element som är associerat med mushändelsen och kommer att ändra markörstilen. Om pekaren till exempel hoppar över följande text ändras markören:Markören ändras på den här länken
Du kan också ändra huvudmarkören som visas när du svävar längst ner på sidan. Med följande funktion kan du ändra markören till den typ som anges i parametern "curtype":
funktion setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), vänta"; bryt GO-fallet "förbjudet": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), default"; bryt GO-fallet "standard": standard: document.body.style.cursor = "url (arrow.cur), standard" GO}}
För att använda det, kalla det "ladda", "förbjudet" eller "standard" från en händelseattribut i en HTML-tagg. Till exempel kommer följande knapp att ändra markören till "loading" när den klickas:
Javascript-språket har obegränsad funktionalitet. Koden nedan räknas ner och varje sekund ändrar muspekaren till en bild som är associerad med det aktuella värdet. Funktionen "setTimeOut" lämnar funktionen suspenderad i en sekund innan den återkallas och uppdateras.
funktion 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å webbsidan, använd funktionen för att visa räkningen på muspekaren när du klickar på en knapp i ett formulär.