SELFHTML: HTML dynamique / Solutions pour la pratique / Éléments de page pouvant être déplacés

SELFHTML/Quickbar HTML dynamique Solutions pour la pratique

	Éléments de page pouvant être déplacés
	Éléments de page pouvant être déplacés - l'exemple

Éléments de page pouvant être déplacés - l'exemple

Exemple d'affichage: aperçu

Cet exemple réalise un fichier HTML dans lequel différents passages peuvent être déplacés avec la souris par l'utilisateur, tels des fenêtres sur une interface graphique utilisateur. Les passages peuvent même se superposer à volonté. Le dernier passage ayant été cliqué et déplacé est automatiquement en premier plan. L'exemple est écrit de telle façon que la fonctionnalité pour Netscape 4.x et l'Explorer Internet MS 4.x soit à peu près la même. Vous pouvez remarquer dans cet exemple, que le travail de programmation pour des effets sortant de l'ordinaire peut vite s'accroître.

Remarque: Pour une meilleure orientation, l'exemple contient des liens aux explications correspondantes, par exemple: 1*. Ces liens ne font pas partie du code source. Dans le cas où vous copiez l'exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous auriez des messages d'erreur JavaScript

Exemple:

<html>
<head>
<style type="text/css">
 layer { padding:10px }
</style>
3* <script language="JScript">
<!--
var max = 4;
var repere = 0;
9* function remarquer()
{
 if(window.event.srcElement.id == "div1" && repere == 0) repere = 1;
 else if(window.event.srcElement.id == "div2" && repere == 0) repere = 2;
 else if(window.event.srcElement.id == "div3" && repere == 0) repere = 3;
 else if(repere > 0) repere = 0;
}
10* function placer()
{
 if(window.event.srcElement.id == "div1" && repere == 1)
 {
  document.all.div1.style.zIndex = max; max+=1;
  document.all.div1.style.left = window.event.x - 100;
  document.all.div1.style.top = window.event.y - 125;
 }
 if(window.event.srcElement.id == "div2" && repere == 2)
 {
  document.all.div2.style.zIndex = max; max+=1;
  document.all.div2.style.left = window.event.x - 150;
  document.all.div2.style.top = window.event.y - 200;
 }
 if(window.event.srcElement.id == "div3" && repere == 3)
 {
  document.all.div3.style.zIndex = max; max+=1;
  document.all.div3.style.left = window.event.x - 200;
  document.all.div3.style.top = window.event.y - 90;
 }
}
// -->
</script>
7* <script for="document" Event="onclick()" language="JScript">
 remarquer();
</script>
8* <script for="document" Event="onmousemove()" language="JScript">
 placer();
</script>
</head>
<body bgcolor=#FFFFFF>

1* <div id="div1" style="position:absolute; top:150px; left:30px;
width:200px; height:250px; background-color:#DDFFDD; color:#006600;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px;">
2* <layer id="lay1" width=200 height=250 bgcolor=#DDFFDD>
Ici se trouve le contenu du passage 1.
</layer>
</div>

<div id="div2" style="position:absolute; top:30px; left:300px;
width:300px; height:400px; background-color:#FFDDDD; color:#660000;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px;">
<layer id="lay2" width=300 height=400 bgcolor=#FFDDDD>
Ici se trouve le contenu du passage 2.
</layer>
</div>

<div id="div3" style="position:absolute; top:180px; left:100px;
width:400px; height:180px; background-color:#DDDDFF; color:#000066;
font-family:Arial; font-size:9pt; font-weight:bold; padding:10px;">
<layer id="lay3" width=400 height=180 bgcolor=#DDDDFF>
Ici se trouve le contenu du passage 3.
</layer>
</div>


4* <script language="JavaScript">
<!--
var maxlay = 4;
if(document.layers)
{ vert = document.layers[0]; rouge = document.layers[1]; bleu = document.layers[2];
   vertinit(); rougeinit(); bleuinit();
}
function vertinit()
5* { vert.captureEvents(Event.CLICK);
  vert.onclick=departvert; vert.onload=resetvert;
}
function rougeinit()
{ rouge.captureEvents(Event.CLICK);
  rouge.onclick=departrouge; rouge.onload=resetrouge;
}
function bleuinit()
{ bleu.captureEvents(Event.CLICK);
  bleu.onclick=departbleu; bleu.onload=resetbleu;
}
function departvert()
{ vert.zIndex = maxlay; maxlay+=1;
  6* vert.captureEvents(Event.MOUSEMOVE|Event.CLICK);
  vert.onmousemove=tirevert; vert.onclick=finvert;
}
function finvert()
{ vert.onmousemove=0; vert.releaseEvents(Event.MOUSEMOVE); vertinit(); }
function resetvert()
{ vert.captureEvents(Event.CLICK|Event.MOUSEMOVE); }
function tirevert(evenem)
{ vert.left = evenem.pageX - 100; vert.top = evenem.pageY  - 240; }
function departrouge()
{ rouge.zIndex = maxlay; maxlay+=1;
  rouge.captureEvents(Event.MOUSEMOVE|Event.CLICK);
  rouge.onmousemove=tirerouge; rouge.onclick=finrouge;
}
function finrouge()
{ rouge.onmousemove=0; rouge.releaseEvents(Event.MOUSEMOVE); ; rougeinit(); }
function resetrouge()
{ rouge.captureEvents(Event.CLICK|Event.MOUSEMOVE); }
function tirerouge(evenem)
{ rouge.left = evenem.pageX - 150; rouge.top = evenem.pageY - 390; }
function departbleu()
{ bleu.zIndex = maxlay; maxlay+=1;
  bleu.captureEvents(Event.MOUSEMOVE|Event.CLICK);
  bleu.onmousemove=tirebleu; bleu.onclick=finbleu;
}
function finbleu()
{ bleu.onmousemove=0; bleu.releaseEvents(Event.MOUSEMOVE); ; bleuinit(); }
function resetbleu()
{ bleu.captureEvents(Event.CLICK|Event.MOUSEMOVE); }
function tirebleu(evenem)
{ bleu.left = evenem.pageX - 200; bleu.top = evenem.pageY - 170; }
// -->
</script>

</body>
</html>

Explication:

Environ à la moitié de l'exemple ci-dessus, sous le repère d'ouverture <body>, ont été définis trois passages en tout (1*). Tous les trois sont définis dans un premier temps comme passages <div>. Les trois passages reçoivent les noms id "div1", "div2" et "div3". À l'aide de mentions de feuilles de style pour le positionnement, les passages sont placés avec précision dans la fenêtre d'affichage. Les passages s'y chevauchent. Étant donné qu'aucun ordre spécial n'a été fixé pour les couches, c'est le passage défini le dernier qui chevauche les deux autres. Cet ordre ne représente que la position de départ que l'utilisateur pourra modifier par la suite.

Dans les trois passages<div> de l'exemple ci-dessus vous trouvez les trois passages layer correspondants <layer> (2*). Cette forme d'imbrication s'est révélée plus pratique. Car l'Explorer Internet MS ignore le repère <layer> tout en interprétant le contenu placé entre <layer> et </layer>. Netscape, par contre, interprète d'abord le repère <div> puis se réjouit du repère intérieur <layer> avec lequel il parvient mieux au HTML dynamique. Les passages <layer> de l'exemple ne comprennent aucune mention pour les valeurs left= et top=. De ce fait, ils commencent simplement dans le coin supérieur gauche dans le passage <div> parent.

Dans l'exemple, tout le traitement pour déplacer les passages dans le cas où l'utilisateur y clique avec la souris et la bouge ensuite est placé dans deux passages script. Les deux passages script sont clairement séparés l'un de l'autre. L'un des deux passages se trouve dans l'entête de fichier - c'est celui pour l'Explorer Internet MS (3*). Ce passage script est désigné par la mention language="JScript". On parvient ainsi à ce que Netscape ignore complètement ce passage. L'autre passage script est noté en dessous des trois passages <div> (4*). Ce passage script est désigné par la mention language="JavaScript", et sera donc remarqué à la fois par Netscape et par l'Explorer Internet MS. Étant donné que l'Explorer Internet MS n'a à vrai dire rien à chercher dans ce passage, les instructions qui se trouvent au tout début du passage script en dehors de chaque fonction ne sont rendues accessibles qu'à Netscape par la requête if(document.layers).
La séparation tranchée des passages script dans cet exemple est judicieuse: en effet, le traitement d'évènements tels que des actions avec la souris par l'utilisateur est résolu de façon si différente par Netscape et par l'Explorer Internet MS qu'il serait difficile de travailler dans le même passage script avec des requêtes if distinctes.

Le traitement pour Netscape correspond à peu près à ce qui est décrit avec plus de précision dans l'exemple pour l' objet Event chez Netscape. Avec captureEvents(Event.CLICK), les trois passages<layer> sont initialisés (5*). L'évènement CLICK est alors surveillé pour les trois passages. Quand il survient, donc quand l'utilisateur clique sur l'un des passages avec la souris, une fonction est alors appelée pour le passage concerné. Si c'est par exemple le passage vert qui est cliqué, la fonction departvert est appelée. Ces fonctions de "départ" surveillent avec captureEvents(Event.MOUSEMOVE) l'évènement "L'utilisateur bouge la souris", et avec captureEvents(Event.CLICK) l'évènement "L'utilisateur clique à nouveau sur le passage" (6*). En bougeant la souris, le passage est déplacé, à un nouveau cliquement de souris, le passage est laissé sur place à l'endroit actuel. Pour cela sont appelées pour bouger la fonction tirevert et pour le cliquement final la fonction finvert. À la fin d'une telle fonction, par exemple à la fin de la fonction finvert, l'initialisation est a nouveau appelée. Ainsi est à nouveau surveillé un désir réitéré de déplacement par l'utilisateur.

Pour le traitement par l'Explorer Internet MS est mis en oeuvre l' objet Event chez Microsoft. Pour cela sont définis dans l'entête du fichier de l'exemple deux passages scripts spéciaux (7* et 8*). Ces scripts avec leur syntaxe spéciale surveillent sur tout le document les deux actions-utilisateur "cliquement de souris" - onclick() - et "mouvement de souris" - onmousemove(). Si l'utilisateur clique avec la souris dans la fenêtre d'affichage, la fonction remarquer() est appelée (9*). Cette fonction gère une variable définie globalement nommée repere. Quand le repere est égal à 0, le cliquement de souris est interprété comme cliquement de départ qui peut entraîner un déplacement du passage. Si le repere est plus grand que 0, le cliquement est interprété comme cliquement final. Ensuite aucun déplacement du passage n'est possible.
Quand la souris est déplacée, la fonction placer() est appelée (10*). Si le repere est plus grand que 0, sa valeur est lue et le passage correspondant est positionné à nouveau.

Il faut encore mentionner comment est programmé le positionnement d'un passage pouvant être déplacé avec le mouvement de la souris. Le déplacement des passages se fait en affectant à la position actuelle du passage, la position actuelle de la souris. Pour l'Explorer Internet MS cela se fait dans la fonction placer(), par exemple avec les instructions suivantes:
document.all.div1.style.left = window.event.x - 100;
document.all.div1.style.top = window.event.y - 125;
Pour Netscape, l'affectation comparable se fait dans les fonctions tire*, par exemple dans la fonction tirevert, à savoir par des instructions comme:
vert.left = evenem.pageX - 100;
vert.top = evenem.pageY - 240;
Mise à part la différence de syntaxe, on remarque que les mentions pour la valeur du nouveau coin supérieur gauche "à partir de la gauche" n'est pas la même dans les deux cas. La valeur y est de 125 dans un cas et de 240 dans l'autre. Les valeurs x, par contre, sont de 100 dans les deux cas. 100 signifie: 100 pixels à gauche ("en moins") de la position actuelle de la souris. Étant donné que le passage vert, dont il est sujet ici, a une largeur de 200 pixels, la souris reste ainsi, lorsqu'elle se déplace, toujours horizontale au milieu du passage. Pour l'Explorer Internet MS, c'est le même procédé pour la valeur verticale: la valeur pour le nouveau coin supérieur gauche à partir du haut se trouve 125 pixels au dessus de la position actuelle de la souris. Étant donné que le passage a une hauteur de 250 pixels, c'est donc ici aussi exactement la moitié. Malheureusement, la même valeur soulèverait chez Netscape des problèmes aussitôt que le layer a un contenu quelconque (à savoir du texte, des graphiques etc.) à l'endroit où se trouve la souris. C'est pour cette raison qu' a été choisi pour Netscape 240 comme valeur "à partir du haut". Comme la hauteur de passage est de 250 pixels, la souris reste pendant le mouvement à un endroit assez bas du passage - là où ne figurent plus de contenus.


après:	Livre d'images à feuilleter
avant:	Affichage de la date et de l'heure

SELFHTML/Quickbar HTML dynamique Solutions pour la pratique