Discussion :

[timal78]

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

[E.Bzz]

Bonjour,

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+

[timal78]

alors voila du coté html (affichage) :

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
 
<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 :

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

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

[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+

[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 ?