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.