-
Curseur personnalisé
qu'est-ce que c'est ?
Voici différents styles de curseurs par défaut que vous pourrez choisir lors du tutoriel.
Passez votre curseur sur les textes pour voir les différentes formes de curseurs.
Main (pointer)
Texte (text)
Viseur (crosshair)
Attente (wait)
Objet déplaçable (move)
Curseur par défaut (default)
Point d'interrogation (help)
Changer la taille vers le haut (n-resize)
Changer la taille vers le bas (s-resize)
Changer la taille vers la droite (e-resize)
Changer la taille vers la gauche (w-resize)
Changer la taille haut+droite (ne-resize)
Changer la taille haut+gauche (nw-resize)
Changer la taille bas+droite (se-resize)
Changer la taille bas+gauche (sw-resize)
comment faire ?
Comme d'habitude, commencez pas ouvrir la feuille CSS de votre blog
Apparence > Modifier le thème > Ajouter du CSS
Copiez/collez le code qui suitbody { cursor: wait; }body représente le corps de la page, il encadre tout votre blog donc les modifications que l'on pourra écrire entre crochets à sa suite se feront sur tout votre blog. cursor c'est votre curseur, dans l'exemple il est suivit de wait qui représente le curseur d'Attente, pour avoir un autre curseur que celui-ci, il vous suffit de remplacer wait par le nom du curseur de votre choix qui se trouve entre parenthèses plus haut.
Si vous souhaitez mettre une image (GIF, PNG, JPG, etc.) pour avoir un curseur
entièrement personnalisé, c'est ce code là qu'il vous faut insérerbody {
cursor: url("urldevotreimage.gif"), auto;
}
Tags : curseur, resize, taille, changer, haut
-
Commentaires
Tu comprends bien que je ne peux pas t'aider avec si peu d'informations ! Quel est le problème ?
Du texte ? Ce n'est pas possible, un curseur doit être une image. Si tu veux un texte, il te suffit de créer une image sur laquelle tu inscris ton texte, tu l'utilises ensuite en tant que curseur. :)
Comment ont fait pour qu'il y'a quelque chose qui suit le curseur quand tu le bouge comme chez aimielisa par exemple?
Pour changer le curseur des liens survolés, il me semble que c'est ceci :
a:hover {
cursor: url("urldevotreimage.gif"), url("urldevotreimage.gif"), auto;
}J'ai réussi à tout faire, mais quesqu'on fait si on veut mettre un certain curseur pour suvolé les liens? :O
Pour pouvoir faire cet effet il faut que le Javascript soit activé sur ton compte.
Tu peux demander l'activation sur le doc. d'Eklablog. Quand c'est fait tu peux lire ce qui suit.Merci au blog lemuseedelasorciere
Il faut créer un module simple et y ajouter ce code là :
<script type="text/javascript">
// <![CDATA[
var colour="#ffffff";
var sparkles=70;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
* topcode adapté *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>Est que tu sais le code CSS pour les petites pailletes aparaisent quans tu fait bougé la souris ?
Je sais, j' explique mal ... --"
Ne t'inquiète pas,je ne vais pas te copier,mon curseur est en forme de smiley=)
Merci du code!
J'espère que ce n'est pas dans l'intention de copier. ^^"
Le code est celui-ci :
a:hover {
cursor: wait ;
}
img:hover {
cursor: wait ;
}Je voudrais faire apparaître mon curseur uniquement quand je survole quelquechose,mais je n'y arrive pas...
9B3lle pas c.Mardi 4 Octobre 2011 à 16:16Tu fais clique droit sur ton gif et Copier l'URL de l'image ou Copier l'adresse de l'image, c'est la même chose. Ensuite tu colle en faisant Ctrl+V à l'emplacement prévu pour l'url de l'image. :)
7B3lle pas c.Lundi 3 Octobre 2011 à 17:21@ Misu Sato : Je crois que tu enlève surement les parenthèses ou les guillemets lorsque tu écrit un code, il ne faut ABSOLUMENT rien enlever, la seule chose, je dis bien la SEULE à remplacer c'est UNIQUEMENT urldevotreimage.gif SANS toucher aux guillemets et parenthèses autour.
j'ai trouver un site de curseur :
http://www.cursors-4u.com/2009/04/18/windows-7-cursors.html
par contre je trouve pas
Vous devez être connecté pour commenter
Coucou, je voulais mettre un curseur mais il est gris et mon fond est gris donc on ne le voit quasiment peu, comment faire pour le mettre en noir???