Agrandir et reduire une image

Bonjour a tous

je bloc a mort pour mon site, j'ai une image " petite" et je veux pouvoir l'agrandir au clic de souris et la réduire sur un autre clic.
j'ai 2 fichier images , une grande et une petite.
si quelqu'un a une solution ,
merci d'avance

Slt

tes 2 photo tu doit les renommé différenment pour commencer ensuite pour le lien pour faire de ta petite photo quel soit cliquable est devienne grande dans une autre page est celui ci ...

enfin j'espere que sa t'aideras ....

<p>
    <a href="img/nom-de-ta-photo.jpg"><img src="img/nom-de-ta-photo_mini.jpg" alt="ma photo" title="Cliquez pour agrandir" /></a>
</p>

tu renomme une photo ( photo.jpg) est l'autre photo ( photo_mini.jpg).....

a bientot....
Modifié par lolo57 (19 Mar 2016 - 01:19)

Bonsoir les créateurs.
En fait mon cher ami " lolo57 " c'est une chose très simple et tu peut passer par trois méthodes différentes:

1 - Changer la taille de l'image lors d'un click.

<img src="photo.jpg" id="photo" width="50"  onClick="document.getElementById('photo').style.width='150px';">

2 - Changer l'image par une plus grande au survol de la souris

<a href="javascript:;"  onMouseOver="document.img_1.src='image2.gif';" onMouseOut="document.img_1.src='image1.gif';"><img name="img_1" src="image1.gif"> </a>

3 - Utiliser une fenêtre modale (plus adéquat) qui affichera la grande image lorsqu'on cliquera sur la petite

merci pour vos conseils,
ce que je cherche c'est de pouvoir agrandir une photo et la réduire sur un clic.
avec 2 fichier photo différent.
j'ai un code en javascript qui fonctionne bien, mais il me perturbe la navigation avec ma barre de menu.
je ne peux plus passer d'une page a l'autre.j'ignore d'où cela peux venir.
[code][/code
]<div id="menu" >
<nav>
<ul>
<li><a href="index.html">Acceuil</a></li></ul>
<ul>
<li><a href="galerie.html"target="_parent">Galerie</a></li></ul>
<ul>
<li><a href="../macro.html">Macro</a></li></ul>
<ul>
<li><a href="#">Carnet de voyages</a>
<ul>
<li><a href="madere-portugal.html" target="_parent">Madère, Portugal</a></ul>
</li>
</li>
</ul>
<ul>
<li><a href="blog.html"target="_parent">Blog</a></li></ul>
<ul>
<li><a href="#">A propos</a>
<ul>
<li><a href="lephotographe.html">Le photographe</a></li>
<li><a href="mentions-legales.html">Mentions légales</a></li>
<li><a href="lephotographe.html">Contact</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="grdgalerie"></div>
<p>
<a href="photos_galerie_web/grandes_vignettes/champs_en_fleur+le.jpg"height="450" width="790" alt="Champs en fleurs" title="champs en fleur"> <img src="photos_galerie_web/petites_vignettes/champs_en_fleur.jpg" height="160" width="266" alt="miniature"/></a>
<a href="photos_galerie_web/grandes_vignettes/coucher_de_soleil+le.jpg"height="450" width="790" title="Afficher l'image originale"><img src="photos_galerie_web/petites_vignettes/coucher_de_soleil.jpg" height="160" width="266" alt="Miniature"/></a><span>Coucher de soleil</span>
</p>
<script>
var links = document.getElementsByTagName('a'),
linksLen = links.length;
for (var i = 2 ; i < linksLen ; i++) {
links.onclick = function() {
displayImg(this);
return false;
};
}
function displayImg(link) {
var img = new Image(),
grdgalerie = document.getElementById('grdgalerie');
img.onload = function() {
grdgalerie.innerHTML = '';
grdgalerie.appendChild(img);
img.src = link.href;
grdgalerie.style.display = 'block';
grdgalerie.innerHTML = '<span>Chargement en cours...</span>'; }
document.getElementById('grdgalerie').onclick = function() {
this.style.display ='none';
};
</script>