REPONSE DANS UN CALQUE


Introduction : qu'est-ce qu'un calque ?
1- exemple simple avec un calque qui s'ouvre
2- exemple simple avec un calque à fermer
3- plusieurs calques


Qu'est ce qu'un calque ?
En haut à droite de cette page, vous voyez deux calques, un sans fond, l'autre avec. Il peut y avoir un texte ou une image dedans. Quel intérêt ? Contrairement à un texte ordinaire, et comme une image, le calque peut être déplacé, être invisible puis visible. C'est un "objet", dont le code le plus simple est <div id="NOM" style=" différentes caractéristiques"> le texte </div>

Exemple simple :
Quelle est la nationalité d'Elis Peters ? cliquez ici pour avoir la réponse
Coucou, c'est un calque !
Un autre calque avec un fond

(voir sur le site EDUCNET, des pages ainsi construites)

CODE de la page (pour savoir comment insérer un code, cliquer ici)
Voir plus bas les explications
Notre calque s'appelle ici "Layer1", il pourrait avoir un autre nom mais ce doit être le même aux différents endroits du code.

<html>
<head>
<script language="javascript">
<!--

function ouvrir(){
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById("Layer1").style.visibility="visible";
}
if (document.layers) { //NS4.X seul
document.Layer1.visibility="visible"
}
}
// -->
</script>
</head>
<body>
Quelle est la nationalit&eacute; d'Elis Peters ?
<i><a href="javascript:ouvrir()">cliquez ici pour avoir la r&eacute;ponse</a></i>
<div id="Layer1" style="position:absolute; left:432px; top:16px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" bgcolor="#FFFFFF" bordercolor="#0000FF">
<tr>
<td>
<div align="center">Anglaise</div>
</td>
</tr>
</table>
</div>
</body>
</html>


EXPLICATIONS
Les textes en rouge sont des noms de variables personnels, en bleu ce qui apparaît dans la page du navigateur.

<html>
<head>

 début de la page html
début de la "tête"
<script language="javascript">
<!--		 début du javascript
<!-- permet que les navigateurs qui ne comprennent pas le javascript n'affichent pas les lignes suivantes
function ouvrir(){ création d'une fonction qui ouvrira le cadre quand elle sera appelée. Nous choisissons son nom (ici "ouvrir). Tout fonction commence par "function", comporte une parenthèse ouverte et une fermée après son nom, et l'ouverture d'accolade "{" obtenue avec les touches AltGr et 4.
if (document.getElementById) {
document.getElementById("Layer1").style.visibility="visible";
}		 if = "si" indique le début d'un test, celui-ci est toujours inclus dans des parenthèses. Nous testons si le navigateur prend en charge l'objet getElementById ce qui est le cas d'Internet Explorer et de Netscape 6. Si c'est le cas la ligne suivante s'effectue : le calque appelé "Layer1" devient visible.
if (document.layers) { //NS4.X seul
document.Layer1.visibility="visible"
}		 si le navigateur reconnaît l'objet document.layers, c'est-à-dire si c'est Netscape 4.5 ou 4.7, c'est cette ligne qui est effectuée. Le calque devient visible.
} nous fermons l'accolade ouverte au début de la fonction
// -->
</script>
</head> 		//--> indique aux navigateurs qui ne prennent pas le javascript en charge sa fin.
</script> : fin du script.
</head> : fin du "head"
Indiquer la fin du script et la fin du "head" est obligatoire.
<body> début de la partie "body" de la page
Quelle est la nationalit&eacute; d'Elis Peters ? question posée (une autre serait possible)
<i><a href="javascript:ouvrir()">cliquez ici pour avoir la r&eacute;ponse</a></i> <i> et </i> indique que ce qui se trouve entre ces deux balises sera en italique.
<a href="..."> et </a> indique que ce qui se trouve entre ces deux balises est en hypertexte : si l'on clique dessus, nous serons dirigé vers une page, ici vers la fonction ouvrir.
javascript:ouvrir() appelle notre fonction
<div id="Layer1" style="position:absolute; left:432px; top:16px; width:161px; height:34px"; visibility: hidden">
<table width="161" border="1" bgcolor="#FFFFFF" bordercolor="#0000FF">
<tr>
<td>
<div align="center">Anglaise</div>
</td>
</tr>
</table>
</div>

début du calque : il commence par <div id=" et finit avec la dernière ligne </div>
Il doit avoir un nom : ce qui suit id= avec obligatoirement des guillemets
ce qui est à l'intérieur des guillemets de style="..." définit les caractéristiques du calque. Cela fait partie des "styles css".
position: absolute indique que le cadre a une position fixe par rapport au haut de la page. L'autre possibilité est relative.
left : donne la position par rapport au bord gauche : "px" en pixels.
top : donne la position par rapport au haut
width : donne la largeur du calque; height, la hauteur. z-index suivi d'un chiffre permet de dire quel calque est visible si plusieurs sont superposés.
<table...> et </table> indique qu'un tableau a été mis dans le calque, c'est nécessaire si vous choisissez un calque non transparent pour qu'il apparaisse correctement dans Netscape. La largeur du tableau doit être en pixels, et non pas en % (égale ou inférieure à celle du calque) sinon sa forme est tout à fait aléatoire dans Netscape.
border donne un bord (le tableau dans lequel vous lisez ces explications, à une bodure = 2. bgcolor donne la couleur du fond "#FFFFFF" indique le blanc, #FFFFCC le jaune clair
bordercolor donne la couleur de la bordure (c'est facultatif) #0000FF=bleu, #CC3366 = rouge
<tr> indique un début de ligne, <td> un début de colonne.
<div align="center"> ... <div> aligne le texte au centre, les autres possibilités sont left (par défaut) et right

</body>
</html> 		fin de la page : il faut fermer le body,
puis le html


2- FERMER LE CALQUE

a- En cliquant sur une croix dans le calque
b- En cliquant sur le texte

en cliquant sur la croix :

 

le calque avec une croix
Code avec Netscape 4.5 et 4.7
Code avec Internet Explorer et Netscape6
- insérer l'image d'une croix dans le calque Layer1. Dans ce code, la croix est dans le même dossier que la page, si vous avez créé un sous-dossier images, notez "../images/croix.jpg"
 <img src="croix.jpg" width="16" height="14" border="0"> idem, c'est du html
- faire un lien de la croix vers la fonction fermer() <a href="javascript:fermer()"> ... le code précedent ...</a> idem, c'est du html
- écrire dans le "head" la fonction fermer (semblable à celle ouvrir, mais où la visibilité devient "invisible" (hidde pour Netscpae, hidden pour IE) function fermer(){
document.Layer1.visibility="hidden"
} 		function fermer(){
document.getElementById
("Layer1").style.visibility="hidden"
}
Code complet d'un calque, visible au départ, se fermant grâce à une croix, avec test du navigateur.
<html>
<head>
<script language="javascript">
<!--
function fermer(){
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById("Layer1").style.visibility="hidden";
}
if (document.layers) { //NS4.X seul
document.Layer1.visibility="hidden"
}
}
// -->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:432px; top:16px; width:161px; height:34px; visibility: visible">
<table width="148" border="1" bgcolor="#FFFFFF" bordercolor="#0000FF">
<tr>
<td>
en cliquant sur une croix
<a href="javascript:fermer()"><img src="../images/croix.jpg" width="16" height="14" border="0"></a>
</td>
</tr>
</table>
</div>
</body>
</html>

fermer le calque en cliquant sur le texte
Code avec Netscape
Code avec Internet Explorer
Le lien se fait sur le texte lui-même, la fonction est la même <a href="javascript:fermer(3)">en cliquant sur le texte</a> idem, c'est du html

Code complet d'un calque, visible au départ, qui se ferme lorsque l'on clique sur le texte, avec test du navigateur
<html>
<head>
<script language="javascript">
<!--
var userAgent=navigator.appName + " " + navigator.appVersion
var agentInfo=userAgent.substring(0, 12)
function fermer(){
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById("Layer1").style.visibility="hidden";
}
if (document.layers) { //NS4.X seul
document.Layer1.visibility="hidden"
}
}

// -->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:432px; top:16px; width:161px; height:34px; visibility: visible">
<table width="148" border="1" bgcolor="#FFFFFF" bordercolor="#0000FF">
<tr>
<td>
<a href="javascript:fermer()">en cliquant sur le texte</a>
</td>
</tr>
</table>
</div>
</body>
</html>


 

3- plusieurs calques qui s'ouvrent et se ferment

Consignes : cliquez sur la question pour avoir la réponse, sur la croix pour fermer la réponse.

1- Quelle est la capitale de la France ?

2- Quel fleuve coule à Paris ?

3- Quel est le département de Nice ?

Note: vous avez dû remarquer que l'alignement n'est pas parfait par rapport aux questions, d'une part il diffère dans Netscape et Internet Explorer et d'autre part il dépend de la taille des caractères choisie par l'utilisateur et de la dimension de la page. Il n'y a pas de solution en javascript qui n'est pas un langage de programmation très strict.

Le code complet (en dessous les explications)

<html>
<head>
<script language="JavaScript">
<!--

function ouvrir(numlayer){
nom="Layer"+numlayer
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById(nom).style.visibility="visible";
}
if (document.layers) { //NS4.X seul
document.layers[nom].visibility="visible"
}
}
function fermer(numlayer){
nom="Layer"+numlayer
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById(nom).style.visibility="hidden";
}
if (document.layers) { //NS4.X seul
document.layers[nom].visibility="hidden"
}
}
//-->
</script>
</head>
<body>
1-<a href="javascript:ouvrir(1)"> Quelle est la capitale de la France ? </a><BR>
2-<a href="javascript:ouvrir(2)"> Quel fleuve coule à Paris ? </a><BR>
3-<a href="javascript:ouvrir(3)"> Quel est le département de Nice? </a><BR>
<div id="Layer1" style="position:absolute; left:432px; top:16px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" height="34" bgcolor="#FFFFFF" bordercolor="#CC0099">
<tr>
<td width="148">
<div align="center"><font color="#000000">Paris</font></div>
</td>
<td width="13">
<div align="right"><font color="#000000"><a href="javascript:fermer(1)"><img src="../images/croix.jpg" width="16" height="14" border="0"></a></font></div>
</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:432px; top:60px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" height="34" bgcolor="#FFFFFF" bordercolor="#CC0099">
<tr>
<td width="148">
<div align="center"><font color="#000000">La Seine </font></div>
</td>
<td width="13">
<div align="right"><font color="#000000"><a href="javascript:fermer(2)"><img src="../images/croix.jpg" width="16" height="14" border="0"></a></font></div>
</td>
</tr>
</table>
</div>
<div id="Layer3" style="position:absolute; left:432px; top:100px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" height="34" bgcolor="#FFFFFF" bordercolor="#CC0099">
<tr>
<td>
<div align="center">Les Alpes Maritimes<font color="#000000"><a href="javascript:fermer(3)"><img src="../images/croix.jpg" width="16" height="14" border="0"></a></font></div>
</td>
</tr>
</table>
</div>
</body>
</html>

Le code expliqué

<html>
<head>
< script language="JavaScript">
<!--
 début de la page html
début de la "tête"
début du script
function ouvrir(numlayer){
nom="Layer"+numlayer
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById(nom).style.visibility="visible";
}
if (document.layers) { //NS4.X seul
document.layers[nom].visibility="visible"
}
}

Voir plus haut la création de fonctions.
Nouveauté : une variable "numlayer" est utilisée à l'intérieur des parenthèses du nom de la fonction "ouvrir". En effet, nous avons plusieurs calques à ouvrir, il ne faut ouvrir que le bon. Nous reconnaissons les calques à leur numéro : Layer1, Layer2, etc...
nom="Layer"+numlayer permet de savoir quel est le nom du calque d'après le numéro appelé dans la fonction.

Les lignes de code diffèrent selon que l'on a
- Internet Explorer ou Netscape 6
- ou Netscape 4.X
function fermer(numlayer){
nom="Layer"+numlayer
if (document.getElementById) { //IE5 ou Netscape 6
document.getElementById(nom).style.visibility="hidden";
}
if (document.layers) { //NS4.X seul
document.layers[nom].visibility="hidden"
}
}		 La fonction fermer est identique, mais rend invisible le calque (hidden)
//-->
</script>
</head>
<body>		 fin du script, du head, début du body
1-<a href="javascript:ouvrir(1)"> Quelle est la capitale de la France ? </a><BR>
2-<a href="javascript:ouvrir(2)"> Quel fleuve coule à Paris ? </a><BR>
3-<a href="javascript:ouvrir(3)"> Quel est le département de Nice? </a><BR> 		Les questions, telles quelles apparaissent dans le navigateur sont en bleu.
<BR> indique un retour à la ligne
Un lien est créé vers la fonction "ouvrir" si l'on clique sur le texte de la question.
Tout lien se crée avec <a href="..."> </a>
<div id="Layer1" style="position:absolute; left:432px; top:16px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" height="34" bgcolor="#FFFFFF" bordercolor="#CC0099">
<tr>
<td width="148">
<div align="center"><font color="#000000">Paris</font></div>
</td>
<td width="13">
<div align="right"><font color="#000000"><a href="javascript:fermer(1)"><img src="../images/croix.jpg" width="16" height="14" border="0"></a></font></div>
</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:432px; top:60px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" height="34" bgcolor="#FFFFFF" bordercolor="#CC0099">
<tr>
<td width="148">
<div align="center"><font color="#000000">La Seine </font></div>
</td>
<td width="13">
<div align="right"><font color="#000000"><a href="javascript:fermer(2)"><img src="../images/croix.jpg" width="16" height="14" border="0"></a></font></div>
</td>
</tr>
</table>
</div>

Les deux premiers calques.
Un calque commence par <div id...> finit par </div> (en violet)
Dans chacun des deux premiers calques, il y a un tableau <table...> </table>
Il nécessaire pour que le calque s'affiche bien dans Netscape que le width soit le même que le calque en pixels (ici : 161) et pas en %.
Avec une ligne <tr> </tr>
deux colonnes <td...> </td>
- la première colonne inclus le texte de la réponse, ici aligné au centre (<div align="center"></div) et en noir (<font color="#000000"></font>
- la deuxième colonne sert à aligner la croix à droite : <div align="right">....</div>
- un lien est fait vers la fonction fermer si l'on clique sur la croix : <a href="javascript:fermer(1)">... </a>
- l'image se trouve dans le sous-répertoire images : <img src="../images/croix.jpg" width="16" height="14" border="0">
<div id="Layer3" style="position:absolute; left:432px; top:100px; width:161px; height:34px; visibility:hidden">
<table width="161" border="1" height="34" bgcolor="#FFFFFF" bordercolor="#CC0099">
<tr>
<td>
<div align="center">Les Alpes Maritimes<font color="#000000"><a href="javascript:fermer(3)"><img src="../images/croix.jpg" width="16" height="14" border="0"></a></font></div>
</td>
</tr>
</table>
</div>
Le 3e calque est un peu plus simple car il n'a qu'une colonne, le texte étant plus long, la croix se place forcément à droite.
</body>
</html>		 fin du body
fin de la page html

Pour que Netscape 4.5 et 4.7 affichent correctement les calques, il est conseillé d'intégrer au script les lignes suivantes qui rechargent la page pour la mettre à la taille maximale.

<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>

 

des calques qui bougent
retour au sommaire

Réalisé par Isabelle Gautier, la diffusion de cet article est protégée par la licence LLDL-v1, Licence de Libre Diffusion des Documents, http://pauillac.inria.fr/~lang/licence/v1/lldd.html . Vous pouvez libremet utiliser, modifier et diffuser ce document mais uniquement à titre gratuit.