Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cambiando El Cursor Del Mouse

    Transféré par

    Paul Delgado Soto
    63 vues2 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    63 vues2 pages

    Cambiando El Cursor Del Mouse

    Transféré par

    Paul Delgado Soto

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 2

    Cambiando el cursor del mouse

    Cmo cambiar con css las opciones por defecto de los cursores al pasar por ciertas partes de la pgina.

    Nuestro sistema operativo posee cursores por defecto. Cursores nos referimos al puntero del ratn: la tpica flechita o cualquier otro dibujo que puede tener. En Windows podemos encontrar varios cursores que se activan cuando pasamos por ciertas zonas de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la tpica flechita (denominada default en CSS) cambia por la manito (pinter). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen. Con la ayuda de las hojas de estilo podemos forzar a nuestro sistema operativo que no se rija ms sobre las normas convencionales de los punteros; logrando as un atractivo diseo web en donde el puntero de nuestro mouse puede llegar a ser hasta una imagen de nuestra propia creacin. A continuacin pueden observar la lista de los cursores disponibles por defecto en Windows: default (flecha) crosshair (cruz) e-resize (flecha que apunta a la derecha) hand (mano) help (signo de pregunta) move (cruz con flechas en los extremos) n-resize (flecha que apunta hacia arriba) ne-resize (flecha que apunta al noreste) nw-resize (flecha que apunta al noroeste) pointer (mano) s-resize (flecha que apunta hacia abajo) se-resize (flecha que apunta hacia el sudeste) sw-resize (flecha que apunta hacia el sudoeste) text (I-beam) w-resize (flecha que apunta a la izquierda) wait (reloj de arena) Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplicndolo a todo el documento o solo a una parte del mismo. A todo el documento:
    <html> <title>Cambiar el cursor</title> <head> <style type="text/css"> <!-body {cursor: pointer} --> </style> </head> <body> </body>

    </html>

    A algunos sectores del documento:


    <html> <title>Cambiar el cursor</title> <head> </head> <body> <h4 style="cursor: default">default</h4> <h4 style="cursor: crosshair">crosshair</h4> <h4 style="cursor: pointer">pointer</h4> <h4 style="cursor: move">move</h4> <h4 style="cursor: nw-resize">nw-resize</h4> <h4 style="cursor: ne-resize">ne-resize</h4> <h4 style="cursor: n-resize">n-resize</h4> <h4 style="cursor: e-resize">e-resize</h4> <h4 style="cursor: help">help</h4> <h4 style="cursor: text">text</h4> <h4 style="cursor: wait">wait</h4> </body> </html>

    Tambin es posible utilizar un cursor personalizado:


    <html> <title>Cambiar el cursor</title> <head> <style type="text/css"> <!-body {cursor : url("find.cur")} --> </style> </head> <body> </body> </html>

    Ver ejemplo en marcha

    Vous aimerez peut-être aussi