Het veranderen van een Muisaanwijzer in Javascript

veranderen van de muiscursor is een eenvoudige manier om jazz-up van uw webpagina met koele speciale effecten.Muiscursor stijlen kunt uw webpagina's usability verbeteren door het verstrekken van uw gebruikers met extra visuele feedback, met name voor meer complexe gescripte webpagina's, zoals games en interactieve kaarten.Javascript kan gebruikt worden wijzigen de muiscursor stijl, waardoor u de muiscursor op basis van de datum van vandaag te veranderen, het weerbericht of bijna alles wat je maar kunt bedenken.De techniek van het gebruik van Javascript, HTML en CSS samen om dynamische webpagina's te maken is DHTML (Dynamic HTML).

Basis muiscursors

  • Er zijn verschillende standaard muiscursors die gebruikt kunnen worden door aanpassing van de stijl van een pagina-element of document lichaam.Deze cursor stijlen zijn het standaard, crosshair, hand, beweging, tekst, wai en hulp.Zie "De CSS cursor eigendom" verbonden in het gedeelte Bronnen voor meer informatie over alle b

    asis cursor stijlen.De cursor stijl weergegeven wanneer de muis over een element kan worden ingesteld met behulp van CSS, zoals in dit voorbeeld:

    & lt; a style = \ "cursor: crosshair \" href = \ "# \" & gt; Cross-hair & lt; / a & gt;

Custom muiscursors

  • In aanvulling op de basis cursors, kunnen aangepaste cursors worden gebruikt door de cursor stijl aan het adres van een cursor bestand of afbeelding, zoals in het volgende voorbeeld:

    & lt; een stijl= \ "cursor: URL (arrow.cur), default \" href = \ "# \" & gt; Custom cursor & lt; / a & gt;

    Browser ondersteuning voor cursor stijlen en bestandstypen is inconsistent.Bijvoorbeeld Internet Explorer verwacht cursor bestanden met .cur of Ani extensies.Firefox houdt niet van geanimeerde cursors (Ani-bestanden), en verwacht een eenvoudige cursor naast de cursor of image-bestand te worden vermeld.Voor het beste resultaat onder de browsers bieden een cursor bestand (.cur of Ani), een beeldbestand (PNG, JPEG of GIF), en een basistype cursor als een fallback.Dit voorbeeld gebruikt een geanimeerde cursor voor zijn eerste keuze, een vlakte cursor bestand als de tweede keuze en de standaard basis cursor als de laatste fallback optie.De browser zal proberen elke optie totdat het vindt men het kan gebruiken.

    & lt; a style = \ "cursor: URL (arrow.ani), URL (arrow.cur), default \" href = \ "# \" & gt; Custom cursor & lt; / a & gt;

    De "Open Cursor Library" gekoppeld in de sectie Resources biedt gratis, no-gedoe muiscursor collecties.

wijzigen Cursorstijl met Inline Javascript

  • U kunt de muiscursor CSS-stijl te veranderen met Javascript.Er zijn verscheidene HTML-kenmerken in verband met de muis acties die u kunt gebruiken om JavaScript uit te voeren wanneer de muis wordt geklikt, verplaatst of zweefde over een webpagina-element.Een aantal van deze kenmerken zijn:

    onmouseover: muisknop ingedrukt
    onmouseup:: muisknop losgelaten
    onmouseout: muisaanwijzer af van het element
    onclick: muis knop geklikt
    ondblclick: muisknop muisaanwijzer over het element
    onmousedown zweeftdubbele geklikt

    Zie de link "Event Attributes 'in het gedeelte Bronnen voor meer event attributen die je kunt gebruiken om Javascript acties toe te voegen.

    Voeg een Javascript actie om een ​​gebeurtenis, zoals een muis-over, simpelweg door het instellen van de waarde van de eigenschap om de Javascript-code die u wilt uitvoeren.In dit voorbeeld wordt de cursor veranderd in de basis "help" cursor wanneer de muis zweeft over de link:

    & lt; a onmouseover = \ "this.style.cursor = 'help', \" href = \ "# \"& gt; Help & lt; / a & gt;

Plezier met functies

  • Soms wil je meer doen dan past comfortabel in een attribuut muis actie.Door het schrijven van al je acties in een Javascript-functie, kunt u al uw code proppen aan de bovenkant van uw HTML-document, en ertoe leiden dat uw cursor magie te gebeuren met een eenvoudige functie oproep in het attribuut evenement.Deze eenvoudige Javascript functie verandert de cursor stijl voor het web pagina element doorgegeven als parameter "el":

    functie setElementCursor (el) {
    el.style.cursor = \ & amp; quot; URL (3DArrow.cur), crosshair \ & amp; quot;

    GO

    }

    Deze functie bevindt zich in een sectie script in de header van het document (tussen de & lt; head & gt; en & lt; / head & gt;-tags), of in een externe Javascript code bestand waarnaar wordt verwezen in de kop van het document.Om deze functie te gebruiken, bel dan de functie met het trefwoord "dit" uit een gebeurtenis attribuut in een HTML-tag.De functie ontvangt een verwijzing naar de webpagina-element verbonden met de muis gebeurtenis, en verandert de cursor stijl.Bijvoorbeeld, wanneer de muisaanwijzer boven deze gelinkte tekst, de cursor weergegeven wordt door de functie in te stellen:

    & lt; a onMouseMove = \ "javascript: setElementCursor (dit); \" href = \ "# \" & gt;Zet de cursor voor deze link & lt; / a & gt;

    U kunt ook de belangrijkste cursor die wordt weergegeven wanneer de cursor zweefde over de webpagina achtergrond veranderen.Deze Javascript functie die de muiscursor stelt voor de belangrijkste webpagina orgaan op basis van de waarde die in de functie als de parameter "curtype":

    functie setMainCursor (curtype) {
    schakelaar (curtype) {
    geval \ & amp; quot; laden\ & amp; quot;: Document.body.style.cursor = \ & amp; quot; URL (working.ani), URL (working.png), wacht \ & amp; quot;;break case

    GO

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

    GO

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

    GO

    }}

    Om deze functie te gebruiken, bel dan de functie met de waarde "laden", "verboden" of "default" van een evenement attribuut in een HTML-tag.Bijvoorbeeld, dit formulier knop roept de functie om de cursor op "loading" wanneer de knop wordt geklikt:

    & lt; input type = \ "submit \" onclick = \ "javascript: setMainCursor ('laden'); \"/ & gt;

    Er is geen limiet aan wat je kunt doen met Javascript-functies.De volgende functie voert een countdown door het veranderen van de belangrijkste muiscursor per seconde cursor beeld in verband met de huidige telling aan.De setTimeOut functie wordt gebruikt om te zorgen dat de functie om te slapen voor een tweede voordat het weer wordt aangeroepen met de bijgewerkte telling.

    functie doCountdownCursor (aantal) {
    document.body.style.cursor = \ & amp; quot; URL (\ & amp; quot; + tel + \ & amp; quot; Ani), URL (\ & amp; quot; + tel +\ & amp; quot; .png), wacht \ & amp; quot;

    GO

    count--

    GO

    als (aantal & gt; 0) {
    setTimeout (\ & amp; quot; doCountdownCursor (\ & amp; quot; + tel + \ & amp; quot;) \ & amp; quot ;, 1000)

    GO


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

    GO

    }}

    Op de webpagina, gebruikt u deze functie om de muiscursor aftellen van 10, wanneer een formulier knop wordt geklikt./ & Gt;:

    & lt;; input type = \ onclick = \ "\ doCountdownCursor (10) javascript" "\ submit"

Resources

  • CSS Cursor Property
  • Evenement Attributes
  • Open Cursor Library
506
0
2
Java Script Programmeren