Discussion:
cursor: none marche pas toujours ?
(trop ancien pour répondre)
Une Bévue
2016-05-05 10:01:47 UTC
Permalink
Raw Message
sur un canvas, j'ai mis :
#picker {
/*
cursor: crosshair;
*/
cursor: none;
float: left;
margin: 10px;
border: 0;
}


quelque fois, je n'ai pas de curseur (rarement), la plus part du temps
j'ai le curseur par défaut ?

comment remédier à ça ?
Pierre Maurette
2016-05-05 15:00:08 UTC
Permalink
Raw Message
Post by Une Bévue
#picker {
/*
cursor: crosshair;
*/
cursor: none;
float: left;
margin: 10px;
border: 0;
}
quelque fois, je n'ai pas de curseur (rarement), la plus part du temps j'ai
le curseur par défaut ?
cursor: none; fonctionne sur les versions actuelles de Firefox, Chrome,
Edge et IE. Lien pour tester:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=none
Attention, d'après moi, cursor:none, c'est simplement un curseur tout
transparent. Ça continue à "se comporter".
Et de plus il y a un risque qu'un curseur qui disparait soit ressenti
comme très inconfortable. Une pratique normale serait plutôt le curseur
standard dé-bindé de tout comportement. En revanche un curseur
au-dessus d'une image peut disparaitre au bout de x" (x petit)
d'immobilité, pour répapparaitre immédiatement quand la souris gigote.
Post by Une Bévue
comment remédier à ça ?
Un curseur en url(xxxx.cur) fonctionne sur tout navigateur décent,
facile d'en faire un tout transparent. Attention, un .png ne fonctionne
pas toujours.
--
Pierre Maurette
Une Bévue
2016-05-06 06:58:51 UTC
Permalink
Raw Message
Post by Pierre Maurette
cursor: none; fonctionne sur les versions actuelles de Firefox, Chrome,
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=none
Attention, d'après moi, cursor:none, c'est simplement un curseur tout
transparent. Ça continue à "se comporter".
Et de plus il y a un risque qu'un curseur qui disparait soit ressenti
comme très inconfortable.
Je suis d'accord. Le but de la manip est de remplacer la comportement du
curseur "normal" par un autre (une image positionnée par onmousemove).

En fait, le curseur se balade sur un canvas où est dessiné une color
wheel. Et au lieu de laisser faire le "onmousemove" tout seul, je ne
rafraichi la position de mon curseur que 50 fois par seconde. la
position de la souris seule étant enregistrée par ailleurs, et en
continu par onmousemove :

var cursorX, cursorY, cursorR, canvasRect;

document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
var dX = ((canvasRect.left + canvasRect.right) / 2 - cursorX);
var dY = ((canvasRect.top + canvasRect.bottom) / 2 - cursorY)
cursorR = Math.round(Math.sqrt(dX * dX + dY * dY) * 100) / 100;
}

par ce procédé le positionnement du curseur à un endroit donné de la
roue colorée est nettement plus facile et précise. Sinon ça tremblotte
et ça saute.
Post by Pierre Maurette
Une pratique normale serait plutôt le curseur
standard dé-bindé de tout comportement. En revanche un curseur au-dessus
d'une image peut disparaitre au bout de x" (x petit) d'immobilité, pour
répapparaitre immédiatement quand la souris gigote.
Post by Une Bévue
comment remédier à ça ?
Un curseur en url(xxxx.cur) fonctionne sur tout navigateur décent,
facile d'en faire un tout transparent. Attention, un .png ne fonctionne
pas toujours.
Ouais, j'ai vu ça un "url(xxxx.cur)" mais je ne sais pas comment en
faire un sur Mac OS X.

Loading...