Discussion :

[Neelix57]

Bonjour,

J'ai récupéré une version à jour d'un ancien script, qui affiche un pointeur animé, comme ceci :


Dans le nouveau script, les images sont décalées :


Quelqu'un pourrait-il m'aider ?

Voilà le script :

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
A=document.getElementById
B=document.all;
C=document.layers;
 
T1=new Array("sweeties/amour/images/val6.gif",32,22,"sweeties/amour/images/val5.gif",33,24,"sweeties/amour/images/val4.gif",41,40,"sweeties/amour/images/val3.gif",43,29,"sweeties/amour/images/val2.gif",55,40,"sweeties/amour/images/val1.gif",69,60)
 
var offsetx=0 //x offset of trail from mouse pointer
var offsety=0 //y offset of trail from mouse pointer
 
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]
 
for (i=0;i<nos;i++) {
    createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")
}
 
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St) {
    with (document) {
        write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
        if(St) {
            if (C)
                write(" style='");
                write(St+";' ")
        }   
        else write((A || B)?"'":"");
            write((At)? At+">" : ">");
            write((HT) ? HT : "");
    if (!Op)
        closeContainer(N)
    }
}
 
function closeContainer() {
    document.write((A || B)?"</div>":"</layer>")
}
 
function getXpos(N) {
    if (A)
        return parseInt(document.getElementById(N).style.left)
    else if (B)
        return parseInt(B[N].style.left)
    else
        return C[N].left
}
 
function getYpos(N) {
    if (A)
        return parseInt(document.getElementById(N).style.top)
    else if (B)
        return parseInt(B[N].style.top)
    else
        return C[N].top
}
 
function moveContainer(N,DX,DY) {
    c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : "";
    if (!B) {
        rightedge=window.innerWidth-T1[1]-20
        bottomedge=window.pageYOffset+window.innerHeight-T1[2]
    }
    c.left=Math.min(rightedge, DX+offsetx) + 'px';
    c.top=Math.min(bottomedge, DY+offsety) + 'px';
}
 
function cycle() {
    //if (IE5) 
    if (document.all&&window.print) {
        ie5fix1=document.body.scrollLeft;
        ie5fix2=document.body.scrollTop;
    }
    for (i=0;i<(nos-1);i++) {
        moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
    }
}
 
function newPos(e) {
    moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}
 
function getedgesIE() {
    rightedge=document.body.clientWidth-T1[1]
    bottomedge=document.body.scrollHeight-T1[2]
}
 
if (B) {
    window.onload=getedgesIE
    window.onresize=getedgesIE
}
 
if(document.layers)
    document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove=newPos
    setInterval("cycle()",rate)

[Doksuri]

ca manque de contexte & c'est visiblement un script minifie...

tu cherches a faire quoi ? qu'une image suive le curseur de souris ?

[NoSmoking]

Bonjour,

J'ai récupéré une version à jour d'un ancien script,

de quel jour parles-tu

Ce genre de script se résume à 4 lignes de code :

Code :

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

1
2
3
4
const img = document.getElementById("image-qui-suit");
document.body.addEventListener("pointermove", (e) => {
  img.style.transform = `translate(${e.pageX}px,${e.pageY}px)`;
});

Il faut simplement mettre un élément dépendant du <body>, par précaution, par exemple :

Code html :

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

<img id="image-qui-suit" src="images/mon-image-qui-suit.png" alt="">

et de lui affecter le CSS suivant :

Code css :

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

1
2
3
4
5
6
#image-qui-suit {
  z-index: 1000;
  position: absolute;
  top: 1em;
  left: 1em;
}

les valeur de top et de left servant au décalage par rapport au pointer.

Nota : dans une autre mesure il existe également la déclaration cursor: url() en CSS, cela ne fait toutefois pas exactement la même chose.

[Neelix57]

tu cherches a faire quoi ? qu'une image suive le curseur de souris ?

En fait, plusieurs images suivent le curseur, un ange et de petits coeurs.

de quel jour parles-tu

Il s'agit d'un script qui remonte à une vingtaine d'années, depuis sont auteur l'a mis à jour.

En fait, la version que j'avais fonctionne toujours, mais sur la version de mon site, conçue au début des années 2000.
Sur la version que je suis entrain d'actualiser en HTML5, cette ancienne version ne fonctionne plus. (le curseur ne bouge plus)

Entre temps, j'ai trouvé la version du script que j'ai postée ici.

Voici ce que ça devrait donner :

[NoSmoking]

Ce qui t'arrives est à peine surprenant, il faut surtout virer tout ce qui ne sert à rien, et même en partie à l'époque.

Voilà une épuration/correction possible.

Une partie CSS à ajouter :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.cursor-trail-wrapper {
  display: flex;
  position: absolute;
  top: -100em;          /* caché au départ */
  left: -100em;
  transition: .1s;      /* pour plus de fluidité */
  pointer-events: none;
}
.cursor-trail-image {
  display: block;       /* centrage dans son conteneur */
  margin: auto;
}
.cursor-trail-wrapper:last-of-type {
  transition: none;     /* pas d'animation pour image du dessus */
}

cela permet de rendre plus « fluide » les déplacements.

La partie JavaScript :

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
"use strict";
const dataImages = [
  { "img": "val6.gif", "width": 32, "height": 22},
  { "img": "val5.gif", "width": 33, "height": 24},
  { "img": "val4.gif", "width": 41, "height": 40},
  { "img": "val3.gif", "width": 43, "height": 29},
  { "img": "val2.gif", "width": 55, "height": 40},
  { "img": "val1.gif", "width": 69, "height": 60}
];
const CHEM_IMAGES = "sweeties/amour/images/";
const NBR_IMAGES = dataImages.length;
 
const OFFSET_X = 0; //x offset of trail from mouse pointer
const OFFSET_Y = 0; //y offset of trail from mouse pointer
const RATE = 50;
 
function createImages(datas) {
  const html = [];
  // tous les conteneurs de la même taille
  const maxWidth = datas.map((o) => o.width).sort((a, b) => a - b).pop();
  const maxHeight = datas.map((o) => o.height).sort((a, b) => a - b).pop();
  // utilisaton des « template string »
  datas.forEach((data, ind) => {
    html.push(`
    <div id="CUR${ind}" class="cursor-trail-wrapper" style="width:${maxWidth}px;height:${maxHeight}px;">
      <img src="${CHEM_IMAGES}${data.img}" class="cursor-trail-image" width="${data.width}" height="${data.height}" alt="img-${ind}">
    </div>
  `);
  });
  // ajout au document
  document.body.insertAdjacentHTML("beforeend", html.join(""));
}
 
function moveContainer(id, posX, posY) {
  const elem = document.getElementById(id);
  const max = {
    x: document.body.scrollWidth - elem.offsetWidth,
    y: document.body.scrollHeight - elem.offsetHeight,
  }
  elem.style.top = Math.min(max.y, posY) + "px";
  elem.style.left = Math.min(max.x, posX) + "px";
}
 
function animCursorTrail() {
  for (let i = 0; i < NBR_IMAGES - 1; i += 1) {
    const nextElement = document.getElementById("CUR" + (i + 1));
    moveContainer("CUR" + i, nextElement.offsetLeft, nextElement.offsetTop);
  }
}
 
document.addEventListener("DOMContentLoaded", function() {
  createImages(dataImages);
  document.addEventListener("pointermove", (e) => {
    moveContainer("CUR" + (NBR_IMAGES - 1), e.pageX + OFFSET_X, e.pageY + OFFSET_Y);
  });
  setInterval(animCursorTrail, RATE);
});

Voilà tu devrais être reparti pour une vingtaine, normalement

[Neelix57]

Je te remercie, NoSmoking, enfin résolu.