Retour onclick

Bonjour
Je développe un petit code me permettra de zoomer sur une image.
Voici le code

<script language="javascript">

function agrandirimage()
{
document.getElementById("Agrandirimage").style.width = "500px";

}


</script>
<style>
	.agrandirimage{width: 200px;}
	#Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}
</style>

<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="agrandirimage" id="Agrandirimage" name="image" onclick="agrandirimage()"> </p>

Seulement je souhaiterais revenir à la taille initiale de l'image en refaisant un onclick.
Est-ce faisable ?
Merci
Modifié par stephane72 (16 Jul 2019 - 12:09)

Et l'eau,

html:

<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="" id="Agrandirimage"> </p>

css:

.agrandirimage{transform: scale(1.25);}
    #Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}

js :

window.addEventListener('DOMContentLoaded', ()=>{
        (()=>{
            let $image = document.getElementById('Agrandirimage');
            $image.addEventListener('click',()=>{
                $image.classList.toggle('agrandirimage');
            })
        })();
    });

Nikel Par contre je dois répété ce code sur plusieurs page de mon site comment je peux faire pour utiliser le toggle plusieurs fois ?

stephane72 a écrit :
Nikel Par contre je dois répété ce code sur plusieurs page de mon site comment je peux faire pour utiliser le toggle plusieurs fois ?

Pour cela il ne faut pas utiliser des ID mais des CLASS

ok j'essaie

C'est très différents avec les classes

Avec un ID c'est unique, donc tu récupère un noeud. Mais avec les classes tu récupère X noeud, donc une collection de noeud dom...

donc c'est un tableau à gérer et non un simple noeud.

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
  //...code...
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

J'ai remplacé par une class mais onclick fonctionne plus !

<script language="javascript">

window.addEventListener('DOMContentLoaded', ()=>{
        (()=>{
            let $image = document.getElementByClass('Agrandirimage');
            $image.addEventListener('click',()=>{
                $image.classList.toggle('agrandirimage');
            })
        })();
    });

</script>
<style>
	
.agrandirimage{transform: scale(1.25);}
 .Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}


</style>


<p><img class="Agrandirimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png"> </p>
<p><img class="Agrandirimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png"> </p>

Oui c'est normal, tu na pas lu mon poste.

Oui désolé j'avais pas vu ton poste.Je viens d'essayer de refaire un test mais je bloque encore

<script language="javascript">

var classname = document.getElementsByClassName("classname");

var agrandirimage = function() {
document.getElementByClass("Agrandirimage").style.width = "500px";
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', agrandirimage, false);
}

</script>
<style>
	
.agrandirimage{transform: scale(1.25);}
 .Agrandirimage:hover {border: 2px solid;cursor: zoom-in;}


</style>


<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="Agrandirimage" name="image" onclick="agrandirimage()"> </p>

<p><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" class="Agrandirimage" name="image" onclick="agrandirimage()"> </p>

Mais... Mais... tu ne lis pas ?

var classname = document.getElementsByClassName("classname");

tu n'a pas de classe qui se nomme "classname" toi... alors utilise ta vrai classe.

car dans la boucle avec le addeventlistener tu ajoute les trigger(les évenement automatique) aux elements portant la classe que tu as saisi. mais tu as saisi "classname"... donc forcément ça marche pas.

Tu saisi ta classe "Agrandirimage" au mauvais endroit.
Modifié par JENCAL (16 Jul 2019 - 16:21)

Désolé JENCAL mais je suis complètement perdu là

Bonjour stephane72,
Un exemple :
https://codepen.io/Zonecss/pen/voYbdg