bonsoir

je refais mon portfolio en ce moment, et je bloque sur quelque chose de surement très simple
(ça fait quand même plusieurs heures que je cherche, et sur tous les forums ils disent que c'est simple....grrr)

je voudrais que lorsqu'on clique sur une image elle disparaisse pour faire apparaitre une légende, et que lorsqu'on clique sur cette légende l'image revienne. j'ai deux div différents et superposés pour ça.

j'ai cherché du coté de jquery, des fonctions hide/show, et tout et tout, mais je n'arrive pas à ce que je veux.

le seul résultat que j'obtiens est que cela marche que sur le premier div mais pas les autres, et encore, je n'arrive pas à faire disparaitre l'image, juste faire apparaitre le texte.

je génère mes divs (qui ont le même ID) par une boucle spip... ca peut venir de là.?
j'avoue ne pas maitriser du tout le javascript, mea culpa.

je suppose que personne n'a compris ce que j'essaye d'expliquer bien tant que mal, alors voici le lien vers ma page :

ICI

si quelqu'un pouvait au moins m'aiguiller vers la bonne technique à utiliser, je pourrais déjà me concentrer sur quelque chose au lieu d'essayer tout ce qui me tombe sous la main ...


merci beaucoup !

Ynk.

Alors... je ne vois pas comment faire plus simple qu'un exemple, fait-maison :

<!-- Note : les positionnements sont faits à l'arrache. Seuls les display:none des contenus importent réellement. -->
<div id="image1" style="position:absolute;top:10px;left:10px;" onclick="toggle_affich(1);">
<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" />
</div>
<div id="contenu1" style="position:absolute;top:10px;left:10px; display:none;" onclick="toggle_affich(1);">
Contenu 1 - Yop !
</div>
<!-- Pour chaque paire de div, on fait onclick="toggle_affich(numero_de_la_paire);" en commençant par 1. -->
<!-- Les ids, pour chaque paire, sont respectivement "image1" et "contenu1", "image2" et "contenu2", etc. -->
<div id="image2" style="position:absolute;top:210px;left:210px;" onclick="toggle_affich(2);">
<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" />
</div>
<div id="contenu2" style="position:absolute;top:210px;left:210px; display:none;" onclick="toggle_affich(2);">
Contenu 2 - Yip !
</div>
<div id="image3" style="position:absolute;top:410px;left:410px;" onclick="toggle_affich(3);">
<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" />
</div>
<div id="contenu3" style="position:absolute;top:410px;left:410px; display:none;" onclick="toggle_affich(3);">
Contenu 3 - Yap !
</div>

<script type="text/javascript">

function toggle_affich(nb) { // Fonction avec en paramètre le "numéro des divs"
	var img = document.getElementById("image"+nb); // On récupère le div image numéroté (grâce au paramètre)
	var contenu = document.getElementById("contenu"+nb); // Le div contenu numéroté (toujours grâce au paramètre)
	if(contenu.style.display == "none") { // Si le div contenu est caché
		contenu.style.display = "block"; // On l'affiche
		img.style.display = "none"; // Et on masque l'image
	} else { // Sinon
		contenu.style.display = "none"; // On masque le contenu
		img.style.display = "inline"; // et on affiche l'image
	}
}

</script>

Dans ce code, tout se base sur les id des divs. Les divs images ont un id "image1", "image2", etc. et les divs texte ont un id "contenu1", "contenu2", etc.

En passant en paramètre le numéro 1 ou 2 ou etc., on peut donc récupérer les deux divs à "switcher"... et les faire "switcher".

Bref, en analysant un peu ce code, tu devrais t'en sortir, je pense.

Mais n'hésite pas à demander si tu rencontres un souci.

wouah, un grand merci !
ca marche nickel.

j'essaie ca


edit :

finalement j'ai fait différemment, mais merci encore pour cette aide !

$(document).ready(function() {

  $("div.projet").each(function(){
    $(this).children("div").hide();
    $(this).click(function ()  {
	$(".projet img").show();
	$(".projet div").hide();
      $(this).children("div").toggle();
      $(this).children("img").toggle();
    });
  });
  
});