Script pointeur - Affichage des images

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

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

Dans le nouveau script, les images sont décalées :
Pièce jointe 643896

Quelqu'un pourrait-il m'aider ?

Voilà le script :

Code:

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)

14/09/2023, 09h39
Doksuri

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

tu cherches a faire quoi ? qu'une image suive le curseur de souris ?
14/09/2023, 11h43
NoSmoking
Bonjour,

Citation:

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

:koi: de quel jour parles-tu :aie:

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

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:

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

et de lui affecter le CSS suivant :
Code:

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.
15/09/2023, 10h29
Neelix57

Citation:

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.

Citation:

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 :
https://youtu.be/0YlRNiu2fB0

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:

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:

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 :mrgreen:

24/09/2023, 07h55
Neelix57

Je te remercie, NoSmoking, enfin résolu.