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

**20cents** · 13/02/2010, 17h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 13/02/2010, 17h53

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;

**pcleder** · 13/02/2010, 18h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**pcleder** · 13/02/2010, 18h43

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**javatwister** · 13/02/2010, 18h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**20cents** · 13/02/2010, 19h19

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

**javatwister** · 13/02/2010, 19h26

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;

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager