Sablier pendant le chargement d'une page

**daydream123** · 16/04/2012, 22h08

Bonjour à tous,
J'ai le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" name="lien1" value="nom du lien" onclick="document.getElementsByTagName('body')[0].style.cursor = 'wait';">

Mais quand je clique dessus, rien ne se passe...
En fait, ce que je veux c'est faire un sablier si jamais une page prend longtemps à se charger. Et là, j'ai voulu tester sur un clic d'un bouton. Pourquoi cela n'a aucun effet?

**Willpower** · 17/04/2012, 00h10

Chez moi ça fonctionne bien (sous chrome) par contre ça ne fonctionne que si ma souris est SUR le body autrement elle à l'apparence lié à l'élément sur lequel elle se trouve.

Pour palier à ce problème tu peux faire une règle css disant que tous tes éléments auront le même curseur que l'élément parent par défaut (donc le "body" si tu n'as rien défini d'autre en principe) grâce à *{cursor:inherit;} comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
	<head>
		<style type="text/css">
			*{cursor:inherit;}
		</style>
	</head>
	<body>
		<input type="button" name="lien1" value="nom du lien" onclick="document.getElementsByTagName('body')[0].style.cursor = 'wait';">
	</body>
</html>

**daydream123** · 17/04/2012, 09h07

Je suis sur Mozilla FireFox et effectivement ça marche mais pas sur toute la page. Malheureusement le *{cursor:inherit;} ne résout pas le problème.

**daydream123** · 17/04/2012, 09h18

Mais ça c'est pas grave, puisque là où je veux l'implémenter le body prend toute la page. Par contre, ce que j'ai remarqué c'est que mon curseur ne change en sablier qu'à la fin du traitement, et reste ensuite sous forme de sablier.

**Willpower** · 17/04/2012, 10h39

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

body{width:100%;height:100%;}

à la fin du traitement ? quel traitement ? et si tu places le changement de curseur AVANT le traitement dans tes instructions de code ?

**daydream123** · 17/04/2012, 10h54

Ben en fait je veux le faire pendant le chargement de la page, et qu'une fois la page chargée, le curseur redevient normal.
Merci pour le css ça marche

**Willpower** · 17/04/2012, 21h54

Envoyé par daydream123

Ben en fait je veux le faire pendant le chargement de la page, et qu'une fois la page chargée, le curseur redevient normal.
Merci pour le css ça marche

dans ce cas:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
	<head>
		<style type="text/css">
                        *{cursor:inherit;}
                        body{cursor:wait;}
                </style>
		<script type="text/javascript">
                        document.body.onload = function(){
                                this.style.cursor = 'default';
                        };
                </script>
	</head>
	<body>
		...
	</body>
</html>

**daydream123** · 18/04/2012, 08h13

Merci beaucoup!

Sablier pendant le chargement d'une page

JavaScript

Discussions similaires

Partager

Partager