Image qui s'agrandit au click

Messages postés
22
Date d'inscription
mercredi 19 août 2015
Statut
Membre
Dernière intervention
18 juillet 2019
-
Bonjour a tous je vous explique mon problème:

Je créer un site Web; j'ai deux image affiché côte à côte (display: flex). Je veux que lorsque je click sur une des deux images, l'autre disparaisse, et l'image du click s'agrandisse.

Voilà la section du code html correspondant:

<section>

<div class="container">

<div class="flex">


<img src="IMG_20170908_110055.jpg" id="imageagrandir" class="image-presentation" alt="image de vitre"/>


<img src="IMG_20170908_110306.jpg" id="imageagrandir2" class="image-presentation" alt="image de vitre"/>

</div>
</div>

</section>

--------------------------------------------------------------------------------------------------

Voilà le code CSS correspondant :

.image-presentation {

margin: 5px;

}

#imageagrandir {

width: 50%;
display: block;
}

#imageagrandir2 {

width: 50%;
display: block;
}

--------------------------------------------------------------------------------------------------
Voilà le code JS :

var image = document.getElementById('imageagrandir');

var imageDeux = document.getElementById('imageagrandir2');


image.addEventListener('click', function() {

if (image.style.width == "50%" ) {

image.style.width = "100%";
imageDeux.style.display = "none";

} else

image.style.width = "50%";
imageDeux.style.display = "block";
});


image2.addEventListener('click', function() {

if (image2.style.width == "50%" ) {

image2.style.width = "100%";
image.style.display = "none";

} else

image2.style.width = "50%";
image.style.display = "block";

});

N'ayant que quelques base en JS, vous comprendrez pourquoi je n'ai pas fait de fonction (ce qui aurait été plus simple je pense), car je ne sais pas en faire ...

Je pense aussi que ma technique employé est assez mauvaise, car je joue que avec le CSS...

Merci d'essayer de la faire de cette façon si possible, et de bien vouloir m'expliquer ce que vous faites :)

Merci par avance :)
Afficher la suite 

1 réponse

0
Merci
Bonjour,
en testant votre code vous devez mettre la console(outils de développement accessible par les menus du navigateur, onglet console). Elle permet d'afficher les erreurs et vous verrez vite d'où vient votre erreur.

Un indice, vérifiez vos noms de variables.
Et la console avec débogage est un outil indispensable pour pas perdre de temps à relire votre code.

Des fonctions vous en utilisez:

image2.addEventListener('click', function() {

if (image2.style.width == "50%" ) {

image2.style.width = "100%";
image.style.display = "none";

} else

image2.style.width = "50%";
image.style.display = "block";

});
/*
addeventListener et une fonction (du langage, pré-faite pour faire simple)qui prends entre parenthèse une autre fonction dite anonyme puisqu'il ne lui a pas été donné de nom(ce qui peut servir pour certains emplois mais ne permet pas de la réutiliser):*/
function(){
//if(image
//....
}



// structure d'une function en JavaScript

function nomDeLaFunction( "ici paramètre/s facultatif et illimités" ){
//-- corps de la fonction, en gros ce qu'elle doit faire et l'utilisation des paramètres éventuels

}//-- la dernière accolade indique la fin de la fonction
//-- Et comme vu dans votre script on peut imbriquer les fonctions les unes dans les autres,
//-- il y a cependant des règles dont il faut tenir compte comme "la durée de vie" de chaque fonction
//-- en effet une fonction une fois lue et résolue n'existe plus et son contenu et ce qui s'y passe n'est //-- pas accessible directement(il y a un moyen de contourner cette restriction) à l'extérieur de celle ci
//-- Vous savez tout ou presque sur les fonctions,
//--- bien qu'il existe bien des manières d'écrire les fonctions et les objets(un autre concept 
//-- important dans l'organisation du programme)
 


"Je pense aussi que ma technique employé est assez mauvaise, car je joue que avec le CSS... "
D'un autre côté tant que ça marche mais essentiellement JavaScript est là pour manipuler la page : HTML et CSS(le DOM) surtout, le reste ce sont des "facilités" de la programmation (variables, tests/conditions et autres structures logiques).

https://www.alsacreations.com/astuce/lire/1436-console-javascript.html
Salut, merci beaucoup de ta réponse.

J'ai bien vue une erreur sur une variable, mais le code ne fonctionne toujours pas. Et je t'avouerais ne pas trop savoir comment m'y prendre pour une function... Aide moi stpp ;)
Le problème est pour l'image2. Lorsque je click dessus, les deux images s'agrandissent, et image ne disparaît pas....
"J'ai bien vue une erreur sur une variable,"
euh pas qu'une seule!!! d'où l'utilisation de la console qui vous montre TOUTES vos erreurs de code.

aidez à quoi? si c'est pour faire le boulot à votre place c'est pas de l'aide et j'ai pas que ça à faire...

En tout cas vous n'êtes vraiment pas loin d'après ce que vous dites si ça marche, il vous suffit de cibler la bonne image pour chaque instructions ou bloc d’instructions.

Pour une fonction vous avez l'explication en détail dans mon message précédent sinon il suffit d'ouvrir n'importe quel tuto ou cours débutant en programmation. Mais là n'est pas le sujet, c'était pour répondre que vous ne saviez pas utiliser une fonction alors qu'il y en a déjà plusieurs dans votre script donc vous le faites sans le savoir. Et ce n'est pas très compliqué, au contraire ça simplifie pas mal de choses sans même besoin d'aller jusque là: https://fr.wikipedia.org/wiki/Programmation_fonctionnelle
Commenter la réponse de Soloc