correction

This commit is contained in:
jmd 2025-04-14 17:36:28 +02:00
parent 4ae9d77f4b
commit d2d7a3378e

View File

@ -3,20 +3,65 @@
// Identifie les deux élements de la liste fixe / portable
const desktopLi = document.getElementById("fixe");
const laptopLi = document.getElementById("portable");
const computerImg = document.getElementById("img-pc");
// Ajouter d'un observateur d'évènement sur ces éléments, faisant appel à la fonction définie ci-dessous
desktopLi.addEventListener("click", () => { selectComputerPicture("fixe"); });
laptopLi.addEventListener("click", () => { selectComputerPicture("portable"); });
// Ajout d'observateurs d'évènements pour le passage de la souris sur l'image
computerImg.addEventListener("mouseenter", () => {
if (desktopLi.classList.contains("selected")) {
selectComputerPicture("portable");
} else {
selectComputerPicture("fixe");
}
})
computerImg.addEventListener("mouseleave", () => {
if (desktopLi.classList.contains("selected")) {
selectComputerPicture("portable");
} else {
selectComputerPicture("fixe");
}
})
// Fonction modifiant l'application de la classe "selected" à un élément, à compléter
function selectComputerPicture(type) {
if (type === "fixe") {
console.log("fixe")
desktopLi.classList.add("selected");
laptopLi.classList.remove("selected");
computerImg.src = "img/ordinateur.png";
} else if (type === "portable") {
console.log("portable")
laptopLi.classList.add("selected");
desktopLi.classList.remove("selected");
computerImg.src = "img/portable.png";
}
}
}
// Tableau contenant les photos à faire défiler
let photos = ["img/clavier.png", "img/souris.png", "img/switch.png", "img/routeur.png"];
let currentPhoto = 0;
const photo = document.getElementById("img-peripherique");
//fonction modifiant la photo en décallant dans le tableau de la valeur "modifier" (positive ou négative)
function changePhotoIndex(modifier) {
currentPhoto += modifier;
if (currentPhoto > photos.length -1) {
currentPhoto = 0;
}
if (currentPhoto < 0) {
currentPhoto = photos.length -1;
}
photo.src = photos[currentPhoto];
}
// Définition des boutons et mise en place d'observateur d'évènements utilisant la fonction
const nextButton = document.getElementById("btn-suivant");
const prevButton = document.getElementById("btn-precedent");
nextButton.addEventListener("click", () => {changePhotoIndex(1);});
prevButton.addEventListener("click", () => {changePhotoIndex(-1);});