Changer apparence pointeur souris chargement

Version imprimable

Bonjour, peut on changer l'apparence du pointeur de souris de chargement en JavaScript ?

Voici mon code actuel qui change le curseur de al souris au bout de 5 seconde, je souhaite le changer quand la page est chargée

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html style="height:100%;width:100%" >
<head>
    <meta charset=utf-8 />
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <script type="text/javascript" >
        $('html').css('cursor','url(http://www.w3schools.com/cssref/smiley.gif), url(http://www.w3schools.com/cssref/myBall.cur), wait');
        $( document ).ready(function() {
            setTimeout(function(){
                $('html').css('cursor','default');
            }, 5000);
        });
    </script>
</body>
</html>

Voila ce que j'ai tentée (sa ne marche pas)

Code:

1
2
3
4
5
$("img").one("load", function() {
  // changer le curseur quand tout est chargé
}).each(function() {
  if(this.complete) $(this).load();
});

Merci d'avance.

14/07/2014, 12h45
sekaijin

il suffit de choisir la bonne classe css
http://www.w3schools.com/cssref/pr_class_cursor.asp
A+JYT
14/07/2014, 16h41
iakou

Le + simple :

Code:

<body style="cursor: crosshair;">

Si vous voulez ensuite le modifier au survol d'une zone, cela nécessitera un zeste de javascript...
14/07/2014, 18h03
sekaijin

Non les bonnes pratiques c'est de passer par une classe
et d'attribuer la class à l'objet désiré (soit en html soit en js)

les attributs de style ça marche mais c'est pas propre.

A+JYT
14/07/2014, 20h25
kaari kosaku
Citation:

Envoyé par iakou

Le + simple :

Code:

<body style="cursor: crosshair;">

Si vous voulez ensuite le modifier au survol d'une zone, cela nécessitera un zeste de javascript...

Pas sûr...
Code:

1 2 3 :hover { cursor: crosshair; }

Je vous explique un peu plus, voila mon code :

Code:

1
2
3
4
5
6
7
8
<script type="text/javascript" >
        $('html').css('cursor','url(http://www.w3schools.com/cssref/smiley.gif), url(http://www.w3schools.com/cssref/myBall.cur), wait');
        $( document ).ready(function() {
            setTimeout(function(){
                $('html').css('cursor','default');
            }, 5000);
        });
    </script>

J'aimerais virer mon setTimeout par un truc du style "if document loading"

14/07/2014, 21h07
iakou

Enlevez tout ce qui concerne le setTimeout et laissez uniquement :

Code:

$('html').css('cursor','default');
15/07/2014, 02h09
Spartacusply
Mettre par défaut le style du cursor sur le body à wait :
Code:

1 2 3 body { cursor : wait; }
Dans un fichier qui se situe tout en bas de page, qui sera inséré juste avant la fermeture du body, écrire cette ligne pour repasser la valeur du curseur en normal :
Code:

1 2 3 4 $(function() { $('html').css('cursor','default'); });
15/07/2014, 08h57
Bovino
Spartacusply, pas tout à fait.

Code:

$(function() {...});

n'a d'une part aucunement besoin de se trouver à la fin de la page puisque cette fonction (alias de .ready()) ne se déclenchera de toute façon que lors de l'événement DOMReady.
D'autre part, il semble que ce que souhaite sazearte est de modifier le curseur une fois la page chargée, or .ready() se déclenche dès que le DOM est prêt, donc avant que les éléments remplacés (notamment les images) ne soient chargés.
Il faut donc passer par l'événement load :
Code:

1 2 3 $('document').on('load', function() { $('html').css('cursor','default'); })
15/07/2014, 09h41
RyzenOC
Je suis un peu paumé la, je fais quoi donc ?,
je fais un css avec :
Code:

1 2 3 body { cursor: url('moncurseurcur'), pointer; }
et je fais un fichier .js avec dedans :
Code:

1 2 3 $('document').on('load', function() { $('html').css('cursor','default'); })
?

D'après ce lien :
http://www.business-opportunite.org/settimeout.php
La fonction settimeout attend que la page est été complètement chargée avant de démarrer le compteur, cela est il vrai ?, si je mets un timeout de 1000, 1 seconde apres que la page se soit chargée complètement le curseur redeviendra normale.
EDIT: j'ai rien dit, c'est coté serveur pas coté client....
15/07/2014, 09h56
iakou

Testez que diable !

Oui j'ai testée mais mon curseur persos ne revient pas en normale, pourquoi ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 <head>
 <title>Essai settimeout</title>
 
  <style>
 body {
cursor: url('loading.cur'), pointer; 
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<SCRIPT LANGUAGE="Javascript">
$('document').on('load', function() {
     $('html').css('cursor','default');
})
 </SCRIPT>
 
</head>
 
<body>
<p> mon site </p>
</body>
 </html>

15/07/2014, 16h59
Bovino

Parce que tu ne sais pas copier coller du code et que tu n'as aucune balise <document> dans ton code ! :mrgreen:
:arrow: Présentation des sélecteurs.
15/07/2014, 18h12
kaari kosaku

Citation:

Envoyé par sazearte

EDIT: j'ai rien dit, c'est coté serveur pas coté client....

Le code JS dans la page html est exécuté par le navigateur donc c'est bien côté client...
15/07/2014, 19h06
RyzenOC

Le setimeout ne commence pas après le chargement complète de la page
15/07/2014, 19h34
Bovino
Tiens... je viens de voir que le code que j'ai donné (et mes sarcasmes ultérieurs) est un peu foireux ! :aie:
Donc je m'automoinsse et je donne le code correct ! :mrgreen:
Code:

1 2 3 body{ cursor: wait; }
Code:

1 2 3 $(window).on('load', function(){ $('body').css('cursor', 'default'); });
:pastaper:

Quant à setTimeout(), ça n'a aucun rapport avec le chargement de la page.