Ändern Sie den Mauszeiger mit JavaScript

Wollte ich ein Skript verwenden, ändern Sie den Maus-Zeiger auf meiner Webseite mit JavaScript.
Es ist besser getan, von CSS, aber meine Anforderung ist ein Skript, das verteilt werden kann, um viele Menschen zu integrieren in den head-Bereich Ihrer websites.
Durch CSS, diese können manipuliert werden, indem

html
{
cursor: *cursorurl*
}

Wie auch in JavaScript?

InformationsquelleAutor der Frage Cipher | 2010-12-30

  1. 31

    Javascript ist ziemlich gut im manipulieren von css.

     document.body.style.cursor = *cursor-url*;
 //OR
 var elementToChange = document.getElementsByTagName("body")[0];
 elementToChange.style.cursor = "url('cursor url with protocol'), auto";

    oder mit jquery:

    $("html").css("cursor: url('cursor url with protocol'), auto");

    Firefox WIRD NICHT FUNKTIONIEREN, es sei denn, Sie legen eine Standard-cursor nach dem abgebildet!!

    andere cursor-Schlüsselwörter

    Denken Sie auch daran, dass der IE6 unterstützt nur .cur und .ani Cursor.

    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>

    InformationsquelleAutor der Antwort Gordon Gustafson

  2. 11
    document.body.style.cursor = 'cursorurl';

    InformationsquelleAutor der Antwort Wally Atkins

  3. 7

    Blick auf diese Seite: http://www.webcodingtech.com/javascript/change-cursor.php. Sieht aus wie Sie können access-cursor-off-Stil. Diese Seite zeigt, dass es getan wird, mit der gesamten Seite, aber ich bin mir sicher, dass ein Kind-element würde genauso gut funktionieren.

    document.body.style.cursor = 'wait';

    InformationsquelleAutor der Antwort Brian Ball

  4. -1

    Bezug auf @CrazyJugglerDrummer zweite Methode wäre es:

    elementsToChange.style.cursor = "http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur";

    InformationsquelleAutor der Antwort Wally Atkins

  5. -2

    Oder Sie können versuchen, die folgenden :

    document.getElementById("id_of_target_element").setAttribute("style", "cursor:url(path_to_file.cur);")

    Manchmal, target_element.style.property = value ist, hat nicht für mich gearbeitet aus Gründen, die mir unbekannt...

    InformationsquelleAutor der Antwort apratimankur

Schreibe einen Kommentar