Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

ik kan geen cursor maken

Hoe kan ik een cursor maken?

Comments

  • edited April 10 Chrome
    Dutch/Nederlands :

    Hey, "Game Girl" om een aparte cursor in te stellen voor een element moet je het volgende doen :



    Eerst moet je de cursor die je wil uploaden als een png

    Let op : dit plaatje moet 32x32 pixels zijn het kan ook groter maar 32x32 is het handigst als je wil dat het werk op alle systemen platformen

    of je gebruikt een van de standaard cursors = zie bron 1

    Als je vervolgens je plaatje hebt ge-upload kopieer je de link
    ziet er ongeveer zo uit "https://domein/plaatje.png" of je kopieert de naam van de standaard lijst zien (Bron 1)

    Om deze cursor vervolgens toe te passen zoek je eerst het element op waar je je cursor wil toepassen

    Bijvoorbeeld ".Header"

    dit vul je dan in je code

    Voorbeelden :

    Custom:

    .Header {
    cursor : url(https://domein/plaatje.png), auto;
    }

    Normaal:

    .Header {
    cursor : (Naam cursor ( zie lijst ( Bron 1 )));
    }

    dit zorgt ervoor dat de website eerst het plaatje (in de link) laad, en mag dat alsnog niet lukken gaat hij zoals de code al zegt op de auto cursor

    als je de cursor op de hele site wil toepassen doe je hetzelfde maar dan het element veranderen in *

    * {
    cursor : url(https://domein/plaatje.png), auto;
    }

    Let op: linkjes etc zullen dan geen "pointer" cursor meer hebben deze moet je zelf dan weer apart voor alles toevoegen

    Voorbeeld :

    .Link {
    cursor : pointer !important}
    }

    !important zorgt ervoor dat het boven de normalen instelling gaat dus dat die important (belangerijker) is
    Natuurlijk kan je daar weer ook een eigen custom pointer toevoegen

    als je het nog niet snapt of het niet helemaal lukt, reageer dan ;3
    of kijk op deze linkjes (let op zijn Engels)

    https://css-tricks.com/almanac/properties/c/cursor/
    https://www.w3schools.com/cssref/pr_class_cursor.asp
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property




    Bron 1 :

    https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor


    alias

    all-scroll

    auto

    cell

    context-menu

    col-resize

    copy

    crosshair

    default

    e-resize

    ew-resize

    grab

    grabbing

    help

    move

    n-resize

    ne-resize

    nesw-resize

    ns-resize

    nw-resize

    nwse-resize

    no-drop

    none

    not-allowed

    pointer

    progress

    row-resize

    s-resize

    se-resize

    sw-resize

    text

    url

    w-resize

    wait

    zoom-in

    zoom-out
Sign In or Register to comment.