[debutant] XHTML CSS JS

Bonjour à tous,

Je souhaiterais faire un trombinoscope basique en XHTML. Pour cela, je dispose d'un fichier HTM, d'une feuille de style CSS, et d'un fichier de script JS.

Mes problèmes sont les suivants :
- Au chargement de la page, je souhaite que toutes les photographies soient masquées : ça ne marche pas. En effet, seul la première tranche de photo est masquée, le reste s'affiche. Pour l'exemple, les photos de la lettre A sont masquées, les autres non.
- Lorsque je souhaite n'afficher qu'une tranche spécifique (lettre C par exemple), les autres ne sont pas masquées.
- Lorsque je souhaite afficher une tranche spécifique (lettre D par exemple), j'aimerai que les photographies soient disposées "en ligne" et non pas les unes en dessous des autres.

Je pense que je ne doit pas être très loin de réussir mais malgré tout, il semble qu'une subtilité m'échappe.

Merci d'avance pour votre aide.

Ci-après la schématique de mon code.

Code HTML :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="trombinoscope.css" rel="stylesheet" type="text/css">
<script src="display.js" type="text/javascript"></script>
<title>Mon titre</title>
</head>
 
<body onload="hide('zone_gallery');">
    <div id="zone_menu">
        <div id="logo">
        </div>
        <div id="see">
            <div class="see_all">
                <a href="#all_letters" onclick="show('all_letters');">
                    Voir tout le trombinoscope (long à afficher)
                </a>
            </div>
            <div class="see_letter">
                <a href="#letter_a" onclick="hide('all_letters');show('letter_a');">A</a>
                <a href="#letter_b" onclick="hide('all_letters');show('letter_b');">B</a>
                <a href="#letter_c" onclick="hide('all_letters');show('letter_c');">C</a>
                <a href="#letter_d" onclick="hide('all_letters');show('letter_d');">D</a>
                <a href="#letter_e" onclick="hide('all_letters');show('letter_e');">E</a>
                <a href="#letter_f" onclick="hide('all_letters');show('letter_f');">F</a>
                <a href="#letter_g" onclick="hide('all_letters');show('letter_g');">G</a>
                <a href="#letter_h" onclick="hide('all_letters');show('letter_h');">H</a>
                <a href="#letter_i" onclick="hide('all_letters');show('letter_i');">I</a>
                <a href="#letter_j" onclick="hide('all_letters');show('letter_j');">J</a>
                <a href="#letter_k" onclick="hide('all_letters');show('letter_k');">K</a>
                <a href="#letter_l" onclick="hide('all_letters');show('letter_l');">L</a>
                <a href="#letter_m" onclick="hide('all_letters');show('letter_m');">M</a>
                <a href="#letter_n" onclick="hide('all_letters');show('letter_n');">N</a>
                <a href="#letter_o" onclick="hide('all_letters');show('letter_o');">O</a>
                <a href="#letter_p" onclick="hide('all_letters');show('letter_p');">P</a>
                <a href="#letter_q" onclick="hide('all_letters');show('letter_q');">Q</a>
                <a href="#letter_r" onclick="hide('all_letters');show('letter_r');">R</a>
                <a href="#letter_s" onclick="hide('all_letters');show('letter_s');">S</a>
                <a href="#letter_t" onclick="hide('all_letters');show('letter_t');">T</a>
                <a href="#letter_u" onclick="hide('all_letters');show('letter_u');">U</a>
                <a href="#letter_v" onclick="hide('all_letters');show('letter_v');">V</a>
                <a href="#letter_w" onclick="hide('all_letters');show('letter_w');">W</a>
                <a href="#letter_x" onclick="hide('all_letters');show('letter_x');">X</a>
                <a href="#letter_y" onclick="hide('all_letters');show('letter_y');">Y</a>
                <a href="#letter_z" onclick="hide('all_letters');show('letter_z');">Z</a>
          </div>
        </div>
    </div>
    <div id="zone_gallery">
        <div id="all_letters">
            <!--
                Code à copier :
                    - rajouter le nom de l'image devant .jpg
                    - taper le NOM Prénom
 
                <div class="photo">
                    <img class="photo_image" src="images/.jpg" />
                    <p class="photo_description"></div>
                </div>
            -->
            <div id="letter_a">
            </div>
            <div id="letter_b">
                <div class="photo">
                    <img class="photo_image" src="images/photo_01.jpg" />
                    <p class="photo_description">Nom_01</div>
                </div>
            </div>
            <div id="letter_c">
                <div class="photo">
                    <img class="photo_image" src="images/photo_02.jpg" />
                    <p class="photo_description">Nom_02</div>
                </div>
            </div>
            <div id="letter_d">
                <div class="photo">
                    <img class="photo_image" src="images/photo_03.jpg" />
                    <p class="photo_description">Nom_03</div>
                </div>
                <div class="photo">
                    <img class="photo_image" src="images/photo_04.jpg" />
                    <p class="photo_description">Nom_04</div>
                </div>
            </div>
            <div id="letter_e">
            </div>
            <div id="letter_f">
            </div>
            <div id="letter_g">
            </div>
            <div id="letter_h">
            </div>
            <div id="letter_i">
            </div>
            <div id="letter_j">
            </div>
            <div id="letter_k">
            </div>
            <div id="letter_l">
            </div>
            <div id="letter_m">
            </div>
            <div id="letter_n">
            </div>
            <div id="letter_o">
            </div>
            <div id="letter_p">
            </div>
            <div id="letter_q">
            </div>
            <div id="letter_r">
            </div>
            <div id="letter_s">
            </div>
            <div id="letter_t">
            </div>
            <div id="letter_u">
            </div>
            <div id="letter_v">
            </div>
            <div id="letter_w">
            </div>
            <div id="letter_x">
            </div>
            <div id="letter_y">
            </div>
            <div id="letter_z">
            </div>
        </div>
    </div>
</body>
</html>

Code CSS :

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
/* GLOBAL */
a {
    color: #FF0000;
    text-decoration: none;}
a:active {
    color: #FFFFFF;
    font-weight: bold;}
a:visited {
    color: #FF0000;}
a:hover {
    color: #00FF00;
    font-weight: bold;}
body {
    color: #000000;
    background-color: #000000;}
div, p {
    color: #FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: medium;}
 
/* ZONE MENU */
#zone_menu {}
#logo {}
#see {
    position: absolute;
    left: 200px;
    top: 15px;}
.see_all {}
.see_letter {}
 
/* ZONE GALLERIE */
#zone_gallery {}
#all_letters {}
#letter_a, #letter_b, #letter_c, #letter_d, #letter_e,
    #letter_f, #letter_g, #letter_h, #letter_i, #letter_j,
    #letter_k, #letter_l, #letter_m, #letter_n, #letter_o,
    #letter_p, #letter_q, #letter_r, #letter_s, #letter_t,
    #letter_u, #letter_v, #letter_w, #letter_x, #letter_y,
    #letter_z {}
.photo {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
    border: 0;
    height: 192px;
    width: 236px;}
.photo_image {
    margin: 0;
    height: 162px;
    width: 216px;}
.photo_description {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    font-size: small;
    text-align: center;}

Code JavaScript :

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
// Document JavaScript
 
/* ------------------------------------------------------------
 * Sommaire :
 *  - hide(id) : Masque l'element correspondant a l'ID
 *  - show(id) : Montre l'element correspondant a l'ID
 * ------------------------------------------------------------ */
 
// Masque l'element correspondant a l'ID
function hide(id) {
    // For recent browsers :
    if (document.getElementById) {
        document.getElementById(id).style.display="none";
    }
    // For old browsers :
    else if (document.all) {
        document.all[id].style.display="none";
    }
    // For very old browsers :
    else if (document.layers) {
        document.layers[id].display="none";
    }
}
 
// Montre l'element correspondant a l'ID
function show(id) {
    // For recent browsers :
    if (document.getElementById) {
        document.getElementById(id).style.display="block";
        //document.getElementById(id).style.display="inline";
    }
    // For old browsers :
    else if (document.all) {
        document.all[id].style.display="block";
        //document.all[id].style.display="inline";
    }
    // For very old browsers :
    else if (document.layers) {
        document.layers[id].display="block";
        //document.layers[id].display="inline";
    }
}

[debutant] XHTML CSS JS - display