por - Cambia el puntero del mouse usando JavaScript
cursor personalizado html (5)
Con respecto al segundo método de @CrazyJugglerDrummer sería:
elementsToChange.style.cursor = "http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur";
Quería usar un script para cambiar el puntero del mouse en mi sitio web usando JavaScript. CSS lo hace mejor, pero mi requisito es un script que se pueda distribuir a muchas personas para incrustar en la sección principal de sus sitios web. A través de CSS, esto puede ser manipulado por
html
{
cursor: *cursorurl*
}
¿Cómo hacer lo mismo en JavaScript?
Javascript es bastante bueno manipulando css.
document.body.style.cursor = *cursor-url*;
//OR
var elementToChange = document.getElementsByTagName("body")[0];
elementToChange.style.cursor = "url(''cursor url with protocol''), auto";
o con jquery:
$("html").css("cursor: url(''cursor url with protocol''), auto");
¡Firefox NO FUNCIONARÁ a menos que especifique un cursor predeterminado después del imágen!
otras palabras clave del cursor
También recuerde que IE6 solo admite cursores .cur y .ani .
working sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First jQuery-Enabled Page</title>
<style type="text/css">
div {
height: 100px;
width: 1000px;
background-color: red;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script></head>
<body>
<div>
hello with a fancy cursor!
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.cursor = "url(''http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur''), auto";
</script>
</html>
Mira esta página: http://www.webcodingtech.com/javascript/change-cursor.php . Parece que puedes acceder al cursor fuera de estilo. Esta página muestra que se ha hecho con toda la página, pero estoy seguro de que un elemento secundario funcionaría igual de bien.
document.body.style.cursor = ''wait'';
O puedes probar lo siguiente:
document.getElementById("id_of_target_element").setAttribute("style", "cursor:url(path_to_file.cur);")
A veces, target_element.style.property = value , no me ha funcionado debido a razones desconocidas para mí ...
document.body.style.cursor = ''cursorurl'';