Débutant - Agrandir une vignette par clique de souris
Bonjour à toutes et à tous,
J'ai un petit problème... J'ai un exercice à faire mais je sèche complètement.
Alors voilà :
On m'a demander de faire 4 pages web, jusque là pas de soucis... Mais... Sur l'une des pages je dois afficher une image en format petit (Vignette) puis l'agrandir grâce à un clique, et la rétrécir à nouveau par clique... J'ai des consignes, un début de code, et je vous avoue que je suis quand même perdu...
Voici le code qu'on m'as donner
Code:
1
2
3
4
5
6
7
8
9
10
11
| // code Javascript
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("smart_thumbnail");
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
alert("I saw you click!");
});
}); |
On m'a donné comme astuce :
To make it work, you will need to execute some code if the image is big or else some other code if not. To that end, you can use what are called an if statement and an else statement, about which you can learn more here. The if statement to check if the image is big should look like this (pay attention to the double-equal sign):
Code:
1
2
3
| if (thumbnailElement.className == "") {
// write here the code that will execute if the image is big
} |
J'ai changer le code par ça
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
| // Code JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("smart_thumbnail");
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
if (thumbnailElement.className == "small") {
alert("You enlarged the image");
thumbnailElement.className = "";
// write here the code that will execute if the image is big
}
if (thumbnailElement.className == "") {
alert("You shrunk the image");
thumbnailElement.className = "small";
}
});
}); |
Là, le code s’enchaîne, donc il agrandi l'image et la rétréci, je le sais grâce aux alertes, maintenant j'aimerais savoir... Comment faire pour faire un système d'attente ??
Je m'explique; Dire au programme, tien l'utilisateur clique sur l'image, faut l'agrandir... L'image reste grande jusqu'au moment où l'utilisateur clique de nouveau sur l'image afin qu'elle redevienne petite (Par défaut).
Si vous avez des questions pour plus de précisions du problème, hésitez pas. Je reste à l’affût et prêt à interagir à chaque réponses.
Je vous dit un grand merci d'avance et j'espère à très vite.
J'ai reussi
