[debutant] XHTML CSS JS - display

Invité · 21/04/2006, 12h03

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 :

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

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

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
// 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";
    }
}

Invité · 21/04/2006, 12h06

Désolé pour le message en double, je souhaitais juste modifier un élément du JavaScript : "inline" modifié en "block".

Invité · 21/04/2006, 14h35

Personne pour m'aider ?

**ackan** · 21/04/2006, 15h42

Explique ton pbm, mais attention display: inline ou display: block ce n'est pas du javascript ce sont des propriétés css

Invité · 21/04/2006, 16h23

Bon je viens de comprendre pourquoi les deux premiers points ne fonctionnaient pas correctement : j'ai tapé /div au lieu de /p dans les class="photo_description". Erreur de bleu ;-)

Reste le dernier point : afficher côte à côte les photos et non pas les unes au dessus des autres.

Merci pour votre aide.

**ackan** · 21/04/2006, 17h32

float : left;

Invité · 25/04/2006, 16h13

Coooool.

Merci beaucoup :-)

**ackan** · 29/04/2006, 16h52

C rien

[debutant] XHTML CSS JS - display

CSS

Discussions similaires

Partager

Partager