bouton monter et descendre

Version imprimable

24/11/2009, 17h11
timal78

1 pièce(s) jointe(s)

bouton monter et descendre

Pièce jointe 55669
Bonjour,

je suis novice avec javascript, après quelque tuto et recherche j'ais réalisé un tableau de photo, sur le click de la miniature j'affiche la même photo en plus gros, les miniature sont sur une colone à gauche et la plus grande est sur la droite.
Se que je voudrais faire c'est de mettre un bouton top et bottom pour faire dérouler la liste de gauche (liste des photos miniature).

Si je ne suis pas très claire il y à l'image en pièce jointe, si quelqu'un peut m'aider, pasque je rame un peut la.

MERCI
24/11/2009, 17h32
E.Bzz

Bonjour,

Citation:

Envoyé par timal78

Si je ne suis pas très claire il y à l'image en pièce jointe

si, c'est relativement clair.
Par contre, pour pouvoir t'aider, le code que tu utilises (HTML + JS) serait encore plus utile ;)

A+

alors voila du coté html (affichage) :

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
 
<table border="1">
                <tr>
                    <td>
                        <span onclick="top('')">top</span>
                    </td>
                </tr>
                <tr>
                    <td style="height:67px;width:100px;">
                        <img src="images/media/min_img1.png" alt="" onclick="affichImage('grandeImage1')" />            
                    </td>
                    <td rowspan="4" style="height:335px;width:500px;">
                        <div id="conteneurImg">
                        <img src="images/media/grande_img1.png" alt="" id="grandeImage1" style="display:none;" />
                        <img src="images/media/grande_img2.png" alt="" id="grandeImage2" style="display:none;" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="height:67px;width:100px;">
                        <%--<img src="images/media/min_img2.png" alt="" onclick="affichImage('grandeImage2')" onmouseover="this.style.border='2px solid gray';" onmouseout="this.style.border='0px solid white';"/>--%>
                        <img src="images/media/min_img2.png" alt="" onclick="affichImage('grandeImage2')"/>
                    </td>                    
                </tr>
                <tr>
                    <td style="height:67px;width:100px;">                        
                        <img src="images/media/min_img2.png" alt="" onclick="affichImage('grandeImage2')"/>
                    </td>                    
                </tr>
                <tr>
                    <td style="height:67px;width:100px;">
                        <img src="images/media/min_img2.png" alt="" onclick="affichImage('grandeImage2')"/>
                    </td>                    
                </tr>
                <tr>
                    <td>
                        <span onclick="bottom('')">bottom</span>
                    </td>
                </tr>
            </table>

et voila coté JS (dans un fchier) :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
function affichImage(idImage) 
{	
	unTest = document.getElementById('conteneurImg');
	myArray= unTest.getElementsByTagName('img');
	for (i=0;i<myArray.length;i++) 
	{
		myArray[i].style.display="none";
	}
	document.getElementById(idImage).style.display="block";
}

pour le momant il n'y a aucun code pour la partie que je souhaiterais faire je me documente un peut, j'ai trouvé des choses pas mal mais bon c'est pas ce que je veux faire, même en l'arrangeant

24/11/2009, 17h45
E.Bzz

Pour le "top", il te suffit d'afficher myArray[0] et de masquer tous les autres.
Pour le bottom, il te suffit d'afficher myArray[myArray.length-1] et de masquer tous les autres.

Pour que ton code soit plus clair, fais une fonction pour chaque cas, mais ces 2 nouvelles fonctions ressembleront beaucoup à la première ;)

A+
25/11/2009, 15h07
timal78

je pense que c'est plus complex que ca, car au final dans la partie de gauche (miniature) au total il va y avoir genre 15 photos et moi je veux les affichers que par 4.

Donc il faut que je gere pour le bouton top:

- qu'elle photo est en haut (l'id), ce qui va me donner l'id de celle qui est en bas simplement en incrémentant de 3 (puisqu'elle sont dans l'ordre).
exemple :
photo4 id="img4"
photo5 id="img5"
photo6 id="img6"
photo7 id="img7"

- cacher la 1er (du groupe) ici la photo4, et rendre visible la photo8

c'est bien ca ?