{"id":1823,"date":"2012-03-04T21:29:36","date_gmt":"2012-03-04T21:29:36","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1823"},"modified":"2012-03-04T21:30:56","modified_gmt":"2012-03-04T21:30:56","slug":"personalizar-puntero-del-raton","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/","title":{"rendered":"Personalizar puntero del rat\u00f3n"},"content":{"rendered":"<p>Nuestro sistema operativo posee cursores por defecto. Como cursores nos referimos al puntero del rat\u00f3n: la t\u00edpica flechita o cualquier otro dibujo que puede tener. En este art\u00edculo veremos c\u00f3mo se puede cambiar el cursor CSS de un elemento de la p\u00e1gina, esto es, cambiar la imagen del cursor al posicionarse con el rat\u00f3n sobre elementos de la p\u00e1gina que nosotros queramos.<\/p>\n<p>En Windows podemos encontrar varios cursores que se activan cuando pasamos por \u201cciertas zonas\u201d de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la t\u00edpica flechita (denominada default en CSS) cambia por la manito (pointer). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen.<\/p>\n<p>Con la ayuda de las hojas de estilo en cascada, podemos forzar a nuestro sistema navegador que no se rija con las normas convencionales de los punteros, logrando as\u00ed un atractivo dise\u00f1o web en donde el puntero de nuestro mouse puede llegar a ser hasta una imagen de nuestra propia creaci\u00f3n.<\/p>\n<p>A continuaci\u00f3n presentamos una la lista de los cursores disponibles por defecto en Windows, y que tambi\u00e9n tendremos disponibles con CSS. En este listado aparece el nombre del cursor (nombre de la pesudoclase CSS que tenemos que utilizar para cambiar el cursor) y el tipo de cursor que se trata.<\/p>\n<ul>\n<li>default (flecha)<\/li>\n<li>crosshair (cruz)<\/li>\n<li>e-resize (flecha que apunta a la derecha)<\/li>\n<li>hand (mano)<\/li>\n<li>help (signo de pregunta)<\/li>\n<li>move (cruz con flechas en los extremos)<\/li>\n<li>n-resize (flecha que apunta hacia arriba)<\/li>\n<li>ne-resize (flecha que apunta al noreste)<\/li>\n<li>nw-resize (flecha que apunta al noroeste)<\/li>\n<li>pointer (mano)<\/li>\n<li>s-resize (flecha que apunta hacia abajo)<\/li>\n<li>se-resize (flecha que apunta hacia el sudeste)<\/li>\n<li>sw-resize (flecha que apunta hacia el sudoeste)<\/li>\n<li>text (I-beam)<\/li>\n<li>w-resize (flecha que apunta a la izquierda)<\/li>\n<li>wait (reloj de arena)<\/li>\n<\/ul>\n<p>Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplic\u00e1ndolo a todo el documento o solo a una parte del mismo.<\/p>\n<p>Para cambiar el cursor en toda la p\u00e1gina podemos utilizar:<\/p>\n<pre>body {cursor: pointer}<\/pre>\n<p>O aplicarlo a una parte de la p\u00e1gina utilizando una clase CSS, por ejemplo:<\/p>\n<pre>.button {cursor: pointer}<\/pre>\n<p>Tambi\u00e9n es posible a\u00f1adir un cursor personalizado:<\/p>\n<pre>body {cursor : url(\"find.cur\")}<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/change-cursor\/\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nuestro sistema operativo posee cursores por defecto. Como cursores nos referimos al puntero del rat\u00f3n: la t\u00edpica flechita o cualquier otro dibujo que puede tener. En este art\u00edculo veremos c\u00f3mo se puede cambiar el cursor CSS de un elemento de la p\u00e1gina, esto es, cambiar la imagen del cursor al posicionarse con el rat\u00f3n sobre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[119],"class_list":["post-1823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-punteros"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Personalizar puntero del rat\u00f3n - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Personalizar puntero del rat\u00f3n - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Nuestro sistema operativo posee cursores por defecto. Como cursores nos referimos al puntero del rat\u00f3n: la t\u00edpica flechita o cualquier otro dibujo que puede tener. En este art\u00edculo veremos c\u00f3mo se puede cambiar el cursor CSS de un elemento de la p\u00e1gina, esto es, cambiar la imagen del cursor al posicionarse con el rat\u00f3n sobre [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-04T21:29:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-03-04T21:30:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/\",\"name\":\"Personalizar puntero del rat\u00f3n - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2012-03-04T21:29:36+00:00\",\"dateModified\":\"2012-03-04T21:30:56+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Personalizar puntero del rat\u00f3n\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Personalizar puntero del rat\u00f3n - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Personalizar puntero del rat\u00f3n - Jose Aguilar Blog","og_description":"Nuestro sistema operativo posee cursores por defecto. Como cursores nos referimos al puntero del rat\u00f3n: la t\u00edpica flechita o cualquier otro dibujo que puede tener. En este art\u00edculo veremos c\u00f3mo se puede cambiar el cursor CSS de un elemento de la p\u00e1gina, esto es, cambiar la imagen del cursor al posicionarse con el rat\u00f3n sobre [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-04T21:29:36+00:00","article_modified_time":"2012-03-04T21:30:56+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/","url":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/","name":"Personalizar puntero del rat\u00f3n - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2012-03-04T21:29:36+00:00","dateModified":"2012-03-04T21:30:56+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/personalizar-puntero-del-raton\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Personalizar puntero del rat\u00f3n"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1823"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1823\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}