Curseur de souris

Curseur de souris - HTML/CSS - Programmation

Marsh Posté le 13-11-2007 à 14:52:55    

Bonjour,
 
J'ai le code pour mettre un curseur de souris différent sur un site, mais je ne sais pas comment l'intaller.
 
<style>
<!--
BODY{ cursor:url("http://www.nollizua.com/curseur/sport/basketball.cur" ); }
-->
</style>
 
Merci  :jap:

Reply

Marsh Posté le 13-11-2007 à 14:52:55   

Reply

Marsh Posté le 13-11-2007 à 14:58:40    

Reply

Marsh Posté le 13-11-2007 à 15:07:09    

Rhooo j'ai pas le temps de lire tout ce truc :( Il n'y a pas quelque chose de plus simple ? Ou un site où il n'y a qu'un code à copier/coller ?

Reply

Marsh Posté le 13-11-2007 à 15:31:30    

ben si il te l'a donné [:spamafote]
 
suffit de mettre ton curseur en local (t'es pas obligé mais bon) et de copier le code fourni (body { cursor: url(tonCurseur.cur), auto; } ) et ca marche, strodur koi :o
 
Pour IE il faut garder que "url"


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 14-11-2007 à 13:55:28    


 
Ben je suis loin d'y connaître quelque chose, donc oui c'est strodur ! :D Nan mais c'est vrai...
 
Ici, il s'agit d'un blog.
 
Dans ma feuille CSS, j'ai ceci :
 
 
 
/* OLD COMMENT PART */
 
/* BALISES */
 
hr{
    height:1px;
 display: block;
 color: #195AB3;
 clear: both;
}
 
/* ID */
#buttons{
 width: 200px;
 margin: 10px auto;
 padding: 0px;
}
#buttons a{
 color: #000;
 font-size: 12px;
 text-decoration: none;
 margin: 0px 15px;
}
#buttons a:hover{
 color: #000;
 font-size: 12px;
 text-decoration: underline;
 margin: 0px 15px;
}
 
#form_comment{
 font-size: 12px;
 padding:20px; margin-top:10px; WIDTH: 100%; background-color:#AB9AA3
 
}
 
#footer{
 width: 100%;
 margin: 0px;
 padding: 0px;
 
 
}
/* CLASSES */
.comment{
 background-color:#AB9AA3;
 margin: 10px 25px 25px 25px;
 padding: 0px;
 text-align: left;
}
.comment h1{
 width: 100%;
 margin: 0px;
 padding: 0px;
 font-size: 18px;
 color: #000039;
}
.comment h2{
 margin: 0px;
 padding: 0px;
 font-size: 13px;
 font-style: italic;
}
.comment p{
 font-size: 12px;
 color: #000039;
}
.url{
    display: block;
    width: 300px;
 color: #FFFFFF;
 margin: 0px;
 padding: 0px;
 text-decoration: none;
 font-size: 12px;
 font-style: italic;
}
.url:hover{
 color: #FFFFFF;
 margin: 0px;
 padding: 0px;
 text-decoration: underline;
 font-size: 12px;
 font-style: italic;
}
.sig{
 margin: 0px;
 padding: 0px;
 float: right;
 text-align: right;
 font-size: 12px;
}
.sig h6{
 margin: 0px;
 padding: 0px;
 font-size: 14px;
 font-weight: bold;
}
.obligatoire{
 width: 11px;
 height: 10px;
 border: none;
 margin: 0px;
 padding: 0px;  
 
}
.mail_link{
 color: #FFFFFF;
 margin: 0px;
 padding: 0px;
 text-decoration: underline;
 font-size: 12px;
 font-style: italic;
}
.mail_link:hover{
 color: #FFFFFF;
 margin: 0px;
 padding: 0px;
 text-decoration: underline;
 font-size: 12px;
 font-style: normal;
    font-weight: bold;
}
.form_text{
    font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
}
.form_title{
 width: 100%;
 margin: 0px;
 padding: 0px;
 font-size: 16px;
 color: #FFE6C4;
}
.freezone_content{
 text-align: left;
 font-size: 10px;
 width: 100%;
}
.anchor2{
 color: #FFFFFF;
 font-size: 10px;
}
 
.content {
padding-top:0px; margin-top:0px; }
#container {
padding-top:0px; padding-bottom:20px;margin-top:0px; background-color:#5C3F17;
 width: 750px;
}
 
a     {text-decoration: none; color: #312A85; font-weight: normal}
a:link    {text-decoration: none; color: #312A85}
a:active    {text-decoration: none; color: #312A85}
a:visited   {text-decoration: none; color: #312A85}
a:hover    {text-decoration: underline; color: #67C4FB}
 
/* OLD MAINPAGE PART */
 
.BUTTON { font-family: arial, helvetica, sans-serif ; border-width: 1pt ; font-size: 12px ; color: #5C3F17 ; background-color: #D0032C ; }
 
 
html, body{
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 background-color:#AB9AA3;
}  
 
.title{
FONT-SIZE: 26px; text-transform:uppercase; font-weight:bold; COLOR: #FFFFFF;  
}
 
.title a:link {
 COLOR: #FFFFFF;  
 text-decoration: none;
}
.title a:visited {
 COLOR: #FFFFFF;  
 text-decoration: none;
}
.title a:hover {
 COLOR: #FFFFFF;  
 text-decoration: none;
}
.title a:active {
 COLOR: #FFFFFF;  
 text-decoration: none;
}
 
.description{
FONT-SIZE: 11px; COLOR: #FF0000; text-transform:uppercase; font-weight:bold;
}
 
.left {
 padding:8px ; FONT-SIZE: 12px;  
}
 
td  {  
vertical-align:top
}
 
img{
 border: 0;
}
 
.post_header{
}
 
.post_header h2{
color: #FFFFFF;
text-transform:uppercase;  
 margin: 0;
 font-size: 14px;
 text-align: left;
 background:none
}
 
.post_header h3{
 margin: 0;
 font-size: 11px;
 text-align: left;
 background:none;
 color: #F8B558;
}
 
 
.post_header a{
 color: #333333;
 text-decoration: none;
 margin: 0;
 padding: 0;
}
.post_header a:hover{
 color: #333333;
 text-decoration: underline;
 margin: 0;
 padding: 0;
}
 
.post_footer{  
}
 
.post_content{
 color: #000000;
        clear: both;
 padding:0px;
 margin-top: 5px;  
 font-size: 12px;
}
 
.post_content_font{
 font-size: 12px;
}
 
.post_content ul{
 margin-left: 10px;
}
 
.post_content li{
 margin-left: 10px;
}
 
.post_content img{
solid; FLOAT: left; margin-right: 10px; margin-BOTTOM: 2px;  
}
 
.boxheader{
text-align:left; FONT-SIZE: 12px; font-weight:bold; text-transform:uppercase; padding-top:6px; padding-bottom:5px;color:#FFC370
}
 
.boxback{
}
 
#boxcontent{
margin-left:0px ; padding-left:0px; text-align:left; FONT-SIZE: 12px; color:#FFE6C4
}
 
UL
{
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
}
 
li{
 list-style-image: url(http://blogsimages.skynet.be/images_fixed/static_529/LfSmart.gif);
 margin: 0px;
 margin-left: 0px;
 padding: 0px;
 text-align: left;
 vertical-align: middle;
 list-style-type: none;
 
}
 
 
#boxcontent TD{
padding-bottom:4px
}
 
.top_freezone{
text-align:left; FONT-SIZE: 12px; font-weight:bold; text-transform:uppercase; padding-top:6px; padding-bottom:2px; color:#FFC370
}
 
.freezone_contentleft{
FONT-SIZE: 12px; padding-top: 6px; padding-bottom: 6px;  
}
 
.header_left
{
    padding-right: 0px;
    padding-left: 0px;
    float: left;
    padding-bottom: 15px;
    padding-top: 35px;
 height: auto;
 min-height: 55px;
}
 
BODY, UL, OL, LI, DD, DL, BLOCKQUOTE, TD, TH
{
    font-family: "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
    font-size: 12px;  
    color: #FFE6C4;  
 
}
 
p {
FONT-SIZE: 13px;
}
#centreur {
     
    background-repeat: repeat-x;
 height: auto;
 min-height: 600px;
}
.header{
padding-top:10px;
padding-bottom:8px;
height: 50px;
min-height: 50px;
}
 
 
Comment faire ? Où le mettre ?
Merci beaucoup  :jap:


Message édité par Vivemotion le 14-11-2007 à 15:26:21
Reply

Marsh Posté le 14-11-2007 à 14:05:12    

ben tu le rajoutes le bout de code où tu veux, genre par exemple à la fin.
Les différentes définitions en CSS se completent, donc tu peux faire :
body {
color: black;
}
 
body {
background-color: blue;
}
 
body {
cursor: url(tonCurseur.cur), auto;
}
 
etc....


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 14-11-2007 à 15:25:49    

Cela ne fonctionne pas. Ca m'énerve, ça ne doit pas être très compliqué, mais pas moyen de le faire ! Y a pas quelqu'un qui peut me trouver ça ?  
 
:jap:

Reply

Marsh Posté le 14-11-2007 à 15:56:21    

t'as une url où je peux jeter un oeil ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 14-11-2007 à 16:18:01    

Reply

Marsh Posté le 14-11-2007 à 16:51:56    

ben ca marche
 
j'ai édité la classe .tabl0, et je lui ai rajouté juste ca :
.tabl0 {
background-color:#CCCCCC;
border:2px outset #FFFFFF;
cursor:url(garou.cur), auto;
}
 
sachant que le "garou.cur" est au même niveau de dossier que la page index.html, t'as même pas besoin de spécifier de chemin.
Il te reste plus qu'à refaire ca mais pour la balise body :)
 
A propos je suppose que tu utilises Internet Explorer ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 14-11-2007 à 16:51:56   

Reply

Marsh Posté le 14-11-2007 à 17:24:37    

Merci pour ton aide.
 
Mais, pourrais-tu me dire concrètement à quel endroit je dois placer quel code précis sur le code que j'ai posté plus haut ?
 
Parce que, au risque de passer piur un vrai schtroumf, je ne sais toujours pas comment arriver à mes fins...

Reply

Marsh Posté le 14-11-2007 à 17:34:09    

Concretement ca fait que 10x que je te le dit, tu le rajoutes où tu veux dans ton fichier CSS le code suivant :

Code :
  1. body {
  2.   cursor: url(tonCurseur.cur); /* pour IE */
  3.   cursor: url(tonCurseur.cur), auto; /* pour les autres */
  4. }


 
Qu'est-ce qui te choque dans mes réponses précédentes ? Nan paske j'ai la vague impression que tu ne les lis même pas... [:kiki]


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 14-11-2007 à 17:43:27    

Mais si mais si, biensûr que je lis bien toutes tes réponses.
Mais, si à la fin de mon code, je mets comme tu le dis  
 
body {
  cursor: url(tonCurseur.cur); /* pour IE */
  cursor: url(tonCurseur.cur), auto; /* pour les autres */
}
 
 
ça ne fonctionne pas...

Reply

Marsh Posté le 14-11-2007 à 17:47:22    

tu l'as bien dans dans ta feuille de style ?
tu as bien sûr remplacé "tonCurseur.cur" par un vrai nom de fichier qui existe ?


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 14-11-2007 à 18:12:52    

Ca veut dire quoi "tu l'as bien dans ta feuille de style" ? Si je le mets bien ?  
Oui oui, j'ai bien remplacé par un nom de fichier valide.
 
Mais, à part avoir essayé en le mettant tout à la fin de mon code CSS, je ne vois pas où je peux le mettre d'autre...

Reply

Marsh Posté le 14-11-2007 à 20:00:48    

okok
 
je suppose que tu es sous IE (c le cas ?)
je suppose aussi que la page sur laquelle tu bosses est http://support.aceboard.fr/lablogo [...] index.html
 
alors pour commencer :
- dans ta feuille de style, lorsque tu définies une classe tu dois pas oublier le point virgule à la fin ni écrire comme bon te semble, ya des règles :

Code :
  1. .tabl0 {
  2. border: 2px outset #ffffff;   /* et NON '#ffffff outset 2px' */
  3. background-color: #cccccc; /* le point virgule */
  4. }


 
dans ton code, tu rajoutes des style "inline" (style="" ), dans ton cas définies les comme ceci :

Code :
  1. <tr class="curseur" style="cursor: url('alladin.cur');">


 
Avec le point virgule et tt et tt, le chemin tu peux le laisser tel quel. C'est juste que une fois qu'on est carré sur la syntaxe, ya moins de soucis ;)
 
Ensuite, j'ai testé ta page sous IE et... ca marche !
Le soucis est que sur ta page tu appliques ton style sur le tag TR, donc ca le fait moins, appliques le plutot sur l'IMG, ca rendra mieux je pense.
 
Si ensuite tu veux appliquer un curseur particulier pour tte ta page :

Code :
  1. <style type="text/css">
  2. body, * {
  3. cursor:url(garou.cur);
  4. cursor:url(garou.cur), auto;
  5. }
  6. .tabl0 {border: #ffffff outset 2px; background-color:#cccccc}
  7. .col1 {text-align:left; width:50%; vertical-align:top}
  8. .col2 {text-align:right; width: 50%; vertical-align:top}
  9. .lettre {font-size:20pt; font-weight:bold; width:45px; height:49px; text-align:center}
  10. .curseur {height:49px; vertical-align:middle}
  11. .gif {width:45px; text-align:center; border: #ffffff outset 2px}
  12. .url {width:300px; padding-left:10px; border: #ffffff inset 2px; font-size:12pt}
  13. img {border:0}
  14. </style>


 
Essaye :)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 15-11-2007 à 15:32:36    

Merci pour toutes vos réponses et votre persévérance pour moi :)
Je sais que ça peut être gonflant, et que vous avez l'impression de je ne lis pas vos réponses.
Mais, je n'y connais rien.
Et j'ai l'impression que vous pensez que je souhaite mettre ça sur un site. Non, il s'agit bien ici d'une simple plateforme de blog sur laquelle je sais toucher au CSS et au HTML.
 
Vraiment, j'ai déjà testé tout ce que vous m'avez expliqué plus haut. Et même avec la meilleure volonté, je ne suis pas encore arrivé à installer un curseur...
 
Voilà comment se présente ma page d'édition, et à quoi j'ai accès :
 
http://img231.imageshack.us/img231/7821/skinedwv2.jpg
 
Merci :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed