Zmena ukazovateľa myši v Javascriptu

Zmena kurzora myši je jednoduchý spôsob , ako oživiť vaše webové stránky so skvelými špeciálnymi efektmi . Kurzor myši štýly môžu zlepšiť použiteľnosť vaše webové stránky tým , že poskytuje svojim užívateľom ďalšie vizuálne spätnú väzbu , a to najmä u zložitejších skriptov webových stránok , ako sú hry a interaktívnych máp . Javascript je možné použiť zmeniť kurzor myši štýl , takže môžete zmeniť kurzor myši na základe dnešného dáta , správy o počasí , alebo takmer nič iného si dokážete predstaviť . Technika pomocou JavaScriptu , HTML a CSS spoločne vytvoriť dynamické webové stránky je DHTML ( Dynamic HTML ) . Základné Kurzory

Existuje niekoľko kurzory predvolené myši , ktoré môžu byť použité zmenou štýl prvku stránky alebo dokumentu tele . Tieto kurzor štýly sú predvolené , crosshair , ruky , pohyb , text , Wai a pomoc . Pozri " The CSS vlastnosť kurzora " spojené v sekcii Zdroje pre úplné informácie o všetkých základných kurzora štýlov . Štýl Kurzor zobrazený pri nabehnutí na element možno nastaviť pomocou CSS , ako v tomto príklade :

style = " cursor : crosshair " href = " # " > Cross - vlasy < /a >
vlastné kurzory

Okrem základných kurzory , vlastné kurzory možno použiť nastavenie štýlu kurzora na adresu súboru kurzora alebo obrazu , rovnako ako v nasledujúci príklad :

style = " cursor : url ( arrow.cur ) , default " href = " # " > Vlastné kurzor < /a >

Browser podpora kurzora štýly a typy súborov , je v rozpore . Napríklad , Internet Explorer očakáva , že kurzor súbory . Cur alebo . Ani rozšírenie . Firefox nemá rád animovaných kurzorov ( . Ani súbory ) , a očakáva , že základné kurzor musí byť uvedené vedľa kurzora alebo image súboru . Pre dosiahnutie najlepších výsledkov medzi prehliadačmi , poskytne kurzora súbor ( . Cur alebo . Ani ) , súboru obrázka ( PNG , JPEG alebo GIF ) , a základný typ kurzora ako záchrana . Tento príklad používa animovaný kurzor na svoje prvé voľby , prostý kurzora súboru ako druhú voľbu a východiskové základné kurzora ako posledná možnosť núdzovú . Prehliadač sa pokúsi každú možnosť , kým nenájde to dá použiť .

Style = " cursor : url ( arrow.ani ) , url ( arrow.cur ) , default " href = " # " > , Vlastné kurzor < /a >

" Otvoriť Knižnica kurzorov " spojené v sekcii Resources ponúka zadarmo , ne-otravovať kurzoru myši zbierky
Zmena kurzora štýl . s Inline Javascript

môžete zmeniť kurzor myši CSS štýl Javascript . Existuje niekoľko HTML atribúty súvisiace s akciou myši môžete použiť na vykonanie Javascript pri kliknutí myšou , presunúť alebo sa vznášal nad webových stránok prvku . Niektoré z týchto atribútov sú :

onmouseover : ukazovateľ myši umiestnený nad elementonmousedown : tlačidlo myši pressedonmouseup : Myš tlačidlo releasedonmouseout : Ukazovateľ myši sa pohybuje preč elementonclick : Myš tlačidlo clickedondblclick : Myš tlačidlo poklepanie

Pozri " Event Atribúty " odkaz v sekcii Zdroje pre ďalšiu akciu atribúty , ktoré môžete použiť na pridanie Javascript akcie .

Pridať akciu JavaScript udalosti , ako je napríklad myš - over , jednoducho nastavením hodnota atribútu do kódu JavaScriptu , ktorý chcete popravený . V tomto príklade , kurzor sa zmení na základné " pomocníka " kurzora myši zotrvá na odkaz :

< onmouseover = " this.style.cursor = ' help ' ; " href = " # " > Pomocník < /a >
Zábava s funkciou

Niekedy budete chcieť urobiť viac , než sa pohodlne vojde do atribútu akcie myši . Zápisom všetky vaše akcie vo funkcii JavaScriptu , môžete napchať celý svoj kód v hornej časti dokumentu HTML , a spôsobí , že vaše kurzor kúzlo sa stane s jednoduchým volanie funkcie v atribúte akcie . Táto jednoduchá funkcia Javascript mení štýl kurzora na webovej stránke prvku odovzdaný ako parameter " el " :

funkcie setElementCursor ( el ) { el.style.cursor = " url ( 3DArrow.cur ) , crosshair " ; }

Táto funkcia sa nachádza v časti skriptu v hlavičke dokumentu ( medzi a < /head > značky ) , alebo v externom Javascript kód súboru odkazovaného v záhlaví dokument . Ak chcete použiť túto funkciu , volanie funkcie s kľúčovým slovom " tento " z atribútu udalosti v HTML tagu. Funkcia prijíma odkaz na webové stránky elementu spojeného s udalosťou myši , a zmení kurzor štýl . Napríklad , keď sa pohybuje ukazovateľ myši nad tento uplatňovania textu , kurzor zobrazuje sa nastavuje funkcia :

onmousemove = " javascript : setElementCursor ( this ) ; " href = " # " > Nastavte kurzor na tento odkaz < /a >

môžete tiež zmeniť hlavné kurzor , ktorý sa zobrazí , keď je kurzor vznášajúce sa nad pozadí webovej stránky . Táto funkcia Javascript , ktorý nastaví kurzor myši na hlavnej webovej stránky orgánu na základe hodnoty prešiel do funkcie ako parameter " curtype " :

funkcie setMainCursor ( curtype ) { switch ( curtype ) { case " načítanie " : document.body.style.cursor = " url ( working.ani ) , url ( working.png ) , počkajte , " ; break ; case " zakázané " : document.body.style.cursor = " url ( unavailable.ani ) , url ( unavailable.png ) , predvolený " ; break ; case " default " : default : document.body.style.cursor = " url ( arrow.cur ) , default " ; } }

Ak chcete použiť túto funkciu , , volanie funkcie s hodnotou " zaťaženie " , " zakázané " alebo " default " z atribútu udalosti v HTML tagu. Napríklad , toto odoslanie formulára tlačidlo volania funkcie nastavte kurzor na " zaťažení " pri kliknutí na tlačidlo :

< input type = " submit " onclick = " javascript : setMainCursor ( " zaťaženie " ) ; " />

Neexistuje žiadny limit na to , čo môžete robiť s funkciami Javascript . Nasledujúce funkcie vykonáva odpočítavanie zmenou hlavného kurzora myši sa každú sekundu na kurzora obrazu súvisiaceho s aktuálnym počtu . Funkcie setTimeout sa používa spôsobiť funkcie spať sekundu pred tým , než je znovu volaná s aktualizovaným počtom .

Funkcia doCountdownCursor ( count ) { document.body.style.cursor = " url ( " + počítať + " . Ani ) , url ( " + počet + " PNG ) , počkajte . " počítať - ; if ( počet > 0 ) { setTimeout ( " doCountdownCursor ( " + počet + " ) " , 1000 ) ; } else { document.body.style.cursor = " url ( arrow.cur ) , default " ; } }

na webovej stránke , použite túto funkciu majú počítať kurzor myši dole z 10 , keď tlačidlo odoslaní formulára kliknutie .

input type = " submit " onclick = " javascript : doCountdownCursor ( 10 ) ; " />

• Predchádzajúca strana: Light Box Tutorial 
• Ďalšia strana: Tutorial na Pull - Down menu v JavaScripte