Discussion :

[boteha]

Bonjour,

J'ai un carrousel d'images dont la structure est la suivante.

Code :

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

1
2
3
4
5
6
<figure role="main">
<button type="button"><img src="im/pr/1550G.avif" alt="vignette 1" width="100" height="77" loading="lazy" decoding="async" /></button>
<img src="im/pr/1550G.avif" alt="mon beau produit tout neuf" width="400" height="305" fetchpriority="high" decoding="async" />
<button type="button"><img src="im/mu/1550-1G.webp" alt="vignette 2" width="100" height="82" loading="lazy" decoding="async" /></button>
<img src="im/mu/1550-1G.webp" alt="imafge 2" width="400" height="328" loading="lazy" decoding="async" />
</figure>

Je dois savoir quel bouton a le focus :

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
<script>
// Focus à l'ouverture de la page
 
document.querySelector('button:has(> img[src$="1550-6G.webp"])').focus ();
 
const imgs = document.querySelectorAll("figure > button");
const imgFocused = [];
imgFocused[0] = "im/mu/1550-1G.webp"
 
// Cherche le Focus
 
for (button of imgs) {
button.addEventListener("blur", function () {
document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
button.addEventListener("mousedown", function () {
imgFocused[0] = document.querySelector(figure > this > img).getAttribute("src");
document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
}
</script>

Cela ne fonctionne pas.

Voyez-vous où est l'erreur dans le code ?

J'ai un gros doute sur :

Code :

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

imgFocused[0] = document.querySelector(figure > this > img).getAttribute("src");

Si vous pouvez m'aider merci d'avance.

[casperweb]

Bonjour, querySelector() attend un sélecteur CSS pas une expression JS.
https://developer.mozilla.org/fr/doc.../querySelector

Tu as la possibilité de récupérer l'évent dans les paramètres de la fonction et dedans il y a plein de chose intéressante, je te laisse observer le résultat du console.log().
Pour connaitre le bouton cliquer, tu disposes de this dans ta fonction, avec firstElementChild qui pourrait t'être utile.

Code :

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

1
2
3
4
5
6
7
button.addEventListener("mousedown", function (e) {
        console.log(e.srcElement.src);
        console.log(this);
 
       //  imgFocused[0] = document.querySelector('figure > this > img').getAttribute("src");
        document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();        
    });

[boteha]

Bonjour casperweb,

Merci de ton suivi.

Il existe une solution, dans la boucle je mets :

Code :

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

imgFocused[0] = this.querySelector('img').getAttribute('src');

Le script :

Code javascrript :

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
<script>
document.querySelector('button:has(> img[src$="1721-1G.webp"])').focus ();
const imgs = document.querySelectorAll("figure > button");
const imgFocused = [];
imgFocused[0] = "im/mu/1721-1G.webp"
for (but of imgs) {
but.addEventListener("blur", function () {
document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
but.addEventListener("mousedown", function () {
 
imgFocused[0] = this.querySelector('img').getAttribute('src');
 
document.querySelector('button:has(> img[src="' + imgFocused[0] + '"])').focus();
});
}
</script>

J'ai un dernier problème étrange.

Le carrousel ouvert dans une pop-up comprend un bouton pour fermer la pop-up.

Code html :

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

1
2
3
4
5
...
<button type="button"><img src="im/mu/1550-6G.webp" alt="" width="100" height="47" loading="lazy" decoding="async" /></button>
<img src="im/mu/1550-6G.webp" alt="" width="400" height="185" loading="lazy" decoding="async" />
<p><span>Agrandir cette fen&ecirc;tre afin de mieux voir les d&eacute;tails.</span><button type="button">Fermer</button></p>
</figure>

Si le bouton Fermer est sous la ligne de flottaison, le survol sur ce bouton provoque un retour vers le haut de page exactement comme si je cliquais vers un lien qui renvoie vers le haut de page.

Je ne vois pas où est l'erreur dans le javascript ci-dessus.

Le script pour Fermer est externe :

Code javascrript :

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

1
2
3
4
5
6
7
8
const ferme = document.querySelector ('p > button, footer > button');
 
ferme.addEventListener ('mousedown', function ()
{
window.close ();
window.opener.focus ();
}
);

Voyez-vous où est l'erreur qui provoque ce comportement étrange au survol du bouton Fermer ?

[casperweb]

Bonjour,
>> Voyez-vous où est l'erreur qui provoque ce comportement étrange au survol du bouton Fermer ?
Non je ne vois pas la raison de ce comportement. Peut être en analysant le code complet de la page et son comportement.
Désolé.

[boteha]

Bonjour casperweb,

Encore merci de ton suivi.

J'ai réglé ce bug sans trop savoir d'où il venait.

Dans le JS comme dans le CSS j'ai banni le sélecteur button pour le remplacer par plus précis figure > button (les vignettes du carrousel) ou p > button (le bouton Fermer).

Par prudence j'attends un peu avant de cocher Résolu mais cela sent bon.