Ajouter des annexes à une page HTML

Version imprimable

25/11/2009, 13h48
Pierrot92320

Ajouter des annexes à une page HTML

Bonjour

Je construit un site (enfin j'essaye) avec un fort contenu mathématique.

Afin de faciliter la lecture de mes pages, il serait agréable pour le visiteur que les développements mathématiques soient cachés, et qu'il puisse les voir uniquement s'il le souhaite en cliquant sur des liens placés dans le texte.

Vous allez me dire : il suffit que les liens renvoient vers d'autres pages du site contenant les développements mathématiques en question.

Cela ne me paraît pas très satisfaisant car d'une part cela complique inutilement le plan du site, en créant des pages que je vais devoir faire apparaître dans le menu de navigation, et d'autre part ces pages et seront directement accessibles par la barre d'adresse alors que leur contenu est sans intérêt sorti de leur contexte.

Voici donc ma question : Peut-on, par un balisage magique que je ne connaîtrais pas, ou par tout autre méthode CSS, ajouter du texte dans la page HTMLqui ne s'affiche à l'écran que si le visiteur a cliqué sur le lien adéquat ? Je ne demande pas bien sûr d'ouvrir une nouvelle fenêtre car je sais que cela est maintenant interdit par les bons usages.

Merci de votre aide,
Pierre
25/11/2009, 15h30
goomazio

Bonjour,

C'est tout à fait possible. Sur la plus part des balises HTML on peut utiliser la l'attribut Visibility et en utilisant du Javascript, on peut changer cet attribut lorsqu'on clique sur un lien par exemple.

Dans cet article il y a un exemple complet.
25/11/2009, 17h11
Pierrot92320

Bonjour Phil

Je te remercie pour cette info. Je ne connais malheureusement pas encore le langage Java, mais je suis en train d'apprendre.

A propos, pourrais-tu me dire s'il y a une différence entre les langages Java et Javascript ?

Merci Pierre
25/11/2009, 18h16
goomazio

Je me posais la même question avant d'apprendre le Javascript. C'est simple, en gros, le langage Java c'est pour faire de vrais applications, et le javascript c'est un "petit" langage pour dire au navigateur internet de manipuler la page web affichée (genre afficher/cacher une balise, afficher une boîte de dialogue).

Dans l'article il y a tout le code et les explications qui vont avec donc ça devrait aller. Si tu as des questions précises sur l'exemple n'hésite pas !

Bon apprentissage :ccool:

java et javascript n'ont en commun que le mot 'java', sinon ils n'ont rien à voir !!

tiens, copie ce code dans un fichier et dis moi ce que tu en penses

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
 
<!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" dir="ltr" lang="fr">
	<head>
		<title>test</title>
 
	<style type="text/css">
        .exemple_maths {
                display : none;
                border : 2px dashed red;
                font-style: italic;
                width : 30%;
                padding-left : 10px;
        }
        </style>
 
	<script type="text/javascript">
        function affiche(le_div) {
                if (document.getElementById(le_div).style.display!='block')
                        document.getElementById(le_div).style.display='block';
                else
                        document.getElementById(le_div).style.display='none';
        }
        </script>
 
	</head>
 
	<body>
 
		bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla 
		bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla 
		bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla 
		bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl<br /> a bla bla bla bla bla bla bla <br /> 
 
		<a href="#" onclick="affiche('ex1')">le premier exemple de maths</a>
		<div class="exemple_maths" id="ex1">
		0 + 0 = la tete a toto <br />
		:-)
		</div>
 
		<br /> 
 
		<a href="#" onclick="affiche('ex2')">le second exemple de maths</a>
		<div class="exemple_maths" id="ex2">
		si A = 1 et B = 1 <br />
		alors <br />
		A = B <br />
		elementaire mon cher watson !
		</div>
		<br /> 
 
		bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla 
		bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla <br />
 
		<a href="#" onclick="affiche('ex3')">le troisieme exemple de maths</a>
		<div class="exemple_maths" id="ex3">
		en géométrie euclidienne habituelle la distance ?l entre deux points de coordonnées (x,y,z) et (x',y',z') vérifie (?l)2 = (?x)2 + (?y)2 + (?z)2 (avec ?x = x' - x, etc.), mais dans l'espace de Minkowski deux points sont repérés par les coordonnées (t,x,y,z) et (t',x',y',z'), où t et t' sont les coordonnées de temps, et la « distance » ?l entre ces points vérifie (?l)2 = - (c.?t)2 + (?x)2 + (?y)2 + (?z)2.
		</div>
 
	</body>
 
</html>

26/11/2009, 12h18
Macmillenium

Seb, tu as oublié le plus important : Un doctype complet et valide.
26/11/2009, 13h09
sebhm

Citation:

Envoyé par Macmillenium

Seb, tu as oublié le plus important : Un doctype complet et valide.

:oops:
oui c'est on ne peut plus vrai !!
:oops:
26/11/2009, 14h39
Pierrot92320

Merci à tous les deux c'est très sympa.

Seb j'ai essayé ton morceau de code, c'est super. Je vais me mettre au javascript :ccool:

Pierre
01/12/2009, 10h28
cdaumas78

Merci Seb , ce bout de code m'a donné exactement ce que je cherchais.

Pierrot, mo aussi, formules mathématiques et autres joyeux affichages,
acceptes-tu d'échanger avec moi sur ce sujet ?