Afficher un div différent en fonction d'un lien

Version imprimable

Bonjour à tous,

Voilà j'ai une sorte de galerie avec des images cliquables. Chaque image comporte un lien que j'aimerais faire pointer vers un div de la page courante pour afficher une description de l'image en question.

Voici mon code :
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 27 28 29 30 31 32 33 34 35 36 37 38 <article> <div id="imageMenu"> <div id="imageMenu-inside"> <ul> <li class="bk1"><a title="Site1" href="javascript:visibilite('description');">Site 1</a></li> <li class="bk2"><a title="Site2" href="#">Site 2</a></li> <li class="bk3"><a title="Site3" href="#">Site 3</a></li> <li class="bk4"><a title="Site4" href="#">Site 4</a></li> <li class="bk5"><a title="Site5" href="#">Site 5</a></li> <li class="bk6"><a title="Site6" href="#">Site 6</a></li> <li class="bk7"><a title="Site7" href="#">Site 7</a></li> <li class="bk8"><a title="Site8" href="#">Site 8</a></li> </ul> </div> </div> <script type="text/javascript"> window.addEvent('domready', function(){ var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:200, border:2, onOpen:function(e,i){location=(e);}}); }); </script> <script language="javascript" type="text/javascript" src="./js/div.js"> </script> <div id="description" style="display:none"> Description </div> </article>
Le lien que j'ai fait pour l'image 1 affiche bien le contenu du div. Mais comment faire pour que les autre liens affichent un contenu différent sans faire 8 div différents ? Il faut faire passer une variable au div, que je recupere alors pour afficher le contenu de maniere dynamique.

Mais je ne sais pas si c'est faisable :? !

Merci d'avance

13/02/2010, 17h53
javatwister

excuse-moi, je ne vois qu'une image dans ton code (???)

en tout cas, donne un id à chaque lien ou ligne pour pouvoir en transférer le contenu dans ton div magique;
13/02/2010, 18h36
pcleder

Réponse
Bonjour,
Tu n'as pas besoin de faire 8 div différentes.
En cliquant sur ton image, tu dois seulement modifier le contenu de ta description.
1) Comme le stipule javatwister, commence d'abord par attribuer un id à chacun de tes liens.

2) Place le contenu de tes descriptions dans un tableau
Ex: var tabDescript = new Array("Description1","Description2", etc...);

3)Attribue la même classe à tes liens ("maclass")

4) Ensuite utilise jQuery 1.4 pour faire simple.
On imagine que ta div ait pour id "Madiv"
On imagine que les id de tes liens soient numérotés, c'est-à-dire :
<a href="#" id="1" ......
<a href="#" id="2" ......
etc...

Cela donne quelque chose comme ça (Entre les balises <head> et </head>
Code:

1 2 3 4 5 6 $(".class")click(function(){ var strId = $(this).attr("id"); $("#Madiv").text(tabDescript[strId - 1]); }
Si tu n'est pas rompu à jQuery, fais moi signe, je commenterai un peu plus.

Suite

A placer entre les balises <head> et </head>

Il manquait quelques caractères et précisions dans mon post précédent.

Code:

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){}
    $(".maclass")click(function(){
         var strId = $(this).attr("id");
         $("#Madiv").text(tabDescript[strId - 1]);
    });
});
</script>

tiens, avec un ptit exemple, ça passe mieux:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
 
 
<style type="text/css">
 
#mess {
	font-weight:700;
	text-align:center;
}
 
#cadre {
	text-align:center;
	margin-top:100px;
}
 
#cadre img {
	cursor:pointer;
}
 
</style>
 
 
 
</head>
<body>
 
<div id="mess">?</div>
 
<div id="cadre">
<img src="http://javatwist.imingo.net/sm41.gif" alt=" " />
<img src="http://javatwist.imingo.net/sm42.gif" alt=" " />
<img src="http://javatwist.imingo.net/sm43.gif" alt=" " />
<img src="http://javatwist.imingo.net/sm04.gif" alt=" " />
</div>
 
<script type="text/javascript">
var c=document.getElementById("cadre").getElementsByTagName("img");
var m=document.getElementById("mess");
var t=["coucher de soleil","lever de soleil", "petit déjeuner de soleil", "goûter de soleil"];
 
for(i in c){
	c[i].ind=i;
	c[i].onclick=function(){
		m.firstChild.data=t[this.ind]
	}
}
</script>
 
</body>
 
</html>

13/02/2010, 19h19
20cents

Merci beaucoup pour l'aide :)

J'ai bien compris le procédé, cependant ma description doit contenir des images, des liens,...

Et donc une certaine pise en forme...

C'est possible avec ce procédé ?

var tabDescript = new Array("Description1","Description2", etc...);

Peut-être créer un fichier php pour chaque description et l'importer dans le div. Mais le procédé reste le meme ?

Merci encore
13/02/2010, 19h26
javatwister

disons que si tu veux garder un code propre, il ne faut pas mettre de html dans un tableau javascript;
choisis alors de faire apparaître un div parmi les 8 qui corespondra à l'image choisie;
13/02/2010, 19h30
20cents

Et selon toi c'est faisable de :

Losque l'on clique sur l'image, ca pointe vers un div. Et dans ce div, je recupere l'id de l'image cliquée, et si par exemple cet id=2, je fais un include("/inc/desc1.php");

Tu en penses quoi ?

Et comment je fais pour recup cet id ?

Merci

oui, c'est aussi ce que je ferais... peut-être;

si tu ne veux pas quitter ta page, passe cet id à une fonction qui va aller chercher ton fichier php via une requête ajax (voir tuto en haut de ton écran);
mais à quoi bon un include php alors que si tu prépares gentuiment tous tes div dans la page avec un display:none, tu n'as plus qu'à choisir celui qui correspond à l'image cliquée.

bref, voilà le schéma du bricolage: tu peux mettre le html que tu veux dans chaque div (mes0, mess1, ...)
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <style type="text/css"> #mess { font-weight:700; text-align:center; } #mess div { display:none; } #cadre { text-align:center; margin-bottom:100px; } #cadre img { cursor:pointer; } </style> </head> <body> <div id="cadre"> <img src="http://javatwist.imingo.net/sm41.gif" alt=" " /> <img src="http://javatwist.imingo.net/sm42.gif" alt=" " /> <img src="http://javatwist.imingo.net/sm43.gif" alt=" " /> <img src="http://javatwist.imingo.net/sm04.gif" alt=" " /> </div> <div id="mess"> <div id="mess0">coucher de soleil</div> <div id="mess1">lever de soleil</div> <div id="mess2">petit déjeuner de soleil</div> <div id="mess3">goûter de soleil</div> </div> <script type="text/javascript"> var c=document.getElementById("cadre").getElementsByTagName("img"); var d=document.getElementById("mess").getElementsByTagName("div"); for(i in c){ c[i].ind=parseInt(i); c[i].onclick=function(){ for(i=0;i!=d.length;i++){ d[i].style.display="none"; } document.getElementById("mess"+[this.ind]).style.display="block"; } } </script> } }

13/02/2010, 22h15
20cents

Merci, c parfait !
27/02/2010, 13h00
attarias

merci javatwister pour le javascript ça marche très bien dans mon cas