Ajouter des annexes à une page HTML

**Pierrot92320** · 25/11/2009, 13h48

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

**goomazio** · 25/11/2009, 15h30

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.

**Pierrot92320** · 25/11/2009, 17h11

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

**goomazio** · 25/11/2009, 18h16

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

**sebhm** · 25/11/2009, 18h36

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 :

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

**Macmillenium** · 26/11/2009, 12h18

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

Ajouter des annexes à une page HTML

HTML

Vue hybride

Discussions similaires

Partager

Partager