| Adresse électronique: |
 Andreas.Zierhut@t-online.de
|
| Présence Internet: |
 http://www.t-online.de/home/andreas.zierhut/
|
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
  |
Concept DHTML
Quand HTML est modifié de façon dynamique, on parle de 
DHTML - HTML dynmique. Lors de la modification d'éléments d'un document, les layer jouent presque toujours un rôle, étant donné que le navigateur Netscape 4 n'a qu'un accès limité aux propriétés des éléments et qu'ainsi par exemple aucune couleur de police ne peut être modifiée par une nouvelle affectation de la propriété
( color).
Concept Layer
Un layer est une couche ou un plan dans un document HTML. Une page normale se trouve être la première couche, les layer peuvent être affectés à une couche au moyen du z-Index.
pour les navigateur Netscape et Explorer Internet:
<div id="lelayer" style="position: absolute; z-Index: 2;"> contenu layer </div> |
spécifique au navigateur Netscape:
<layer name="lelayer" z-index=2> contenu layer </layer> |
Le layer se trouve en deuxième couche c'est à dire qu'il recouvrirait à cet endroit le contenu du document.
Il faut privilégier la deuxième variante si le layer est écrit dans le document avec la commande JavaScript document.write()
et qu'une solution doit être écrite spécialement pour le navigateur Netscape. Avec la première variante, le navigateur Netscape a tendance autrement à "se planter".
| |
Souvent, il serait bien utile de pouvoir placer dans un document un layer ou couche/plan.
Exemple concret: une barre de menus doit être affichée dans la deuxième ligne d'un tableau variable. Un positionnement absolu ne peut être envisagé en raison de la représentation qui peut varier selon les différentes résolutions d'écran.
 |
||||||||
|
|
|
|
|
 | |||
|
||||||||
|
|
|
| |||||
|
|
|||||||
| |
Pourquoi ne pas utiliser tout simplement un layer positionné de façon relative?
Dans les CSS existe la possibilité d'insérer un layer en plein milieu d'un document grâce à
position:relative.
Inconvénients:
S'il s'agit de modifier la couleur de la couleur de police d'écriture en y faisant passer la souris, Cette solution doit être écartée. La couleur ne peut pas être modifiée dans le navigateur Netscape, tout le contenu du layer doit être réécrit.
Conclusion: un layer positionné de façon absolue résout bien des choses.
| |
Principe: marquer l'endroit du document avec un layer positionné relativement, puis en mettre un positionné de façon relative à ce même endroit.
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
var ie = document.all ? true : false;
var ns = document.layers ? true : false;
function mark()
{
if (ie)
document.write('<div id="lelayer"> </div>');
else if (ns)
document.write('<ilayer name="lelayer"> </ilayer>');
}
function ShowNew()
{
if (ie) {
var lelayer = document.all.lelayer;
var afflayer = document.all.layeraffiche;
afflayer.style.posLeft = getLeft(lelayer);
afflayer.style.posTop = getTop(lelayer);
afflayer.style.visibility = 'visible';
}
else if (ns) {
var lelayer = document.lelayer;
var afflayer = document.layeraffiche;
afflayer.pageX = lelayer.pageX;
afflayer.pageY = lelayer.pageY;
afflayer.visibility = 'show';
}
}
function getLeft(l)
{
if (l.offsetParent) return (l.offsetLeft + getLeft(l.offsetParent));
else return (l.offsetLeft);
}
function getTop(l)
{
if (l.offsetParent) return (l.offsetTop + getTop(l.offsetParent));
else return (l.offsetTop);
}
function Write(nom, contenu)
{
if (ie)
document.all[nom].innerText = contenu;
else if (ns) {
with (document[nom].document) {
open();
write(contenu);
close();
}
}
}
//-->
</script>
</head>
<body onLoad="ShowNew()">
<div id="layeraffiche" style="position: absolute; visibility: hidden">contenu layer</div>
<table border=1 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td width="20%"> </td>
<td width="80%">
<script language="JavaScript1.2" type="text/javascript">
<!--
mark();
//-->
</script>
</td>
</tr>
</table>
<a href="javascript:Write('layeraffiche', 'nouveau contenu')">nouveau contenu</a>
</body>
</html>
|
Le script prend note de la position du layer dans le tableau et y met un nouveau layer après le chargement de la page.
Ici donc, le texte "contenu layer" est affiché dans la 2ème colonne du tableau.
En cliquant sue le lien, le texte se change en "nouveau contenu".
fonction mark():
Avec document.write() un layer positionné de façon relative est inséré dans le document.
fonction ShowNew():
Le layer "layeraffiche" est positionné et affiché à la position du layer inséré auparavant.
fonctions getLeft() et getTop():
Dans l'Explorer Internet n'existe aucune propriété susceptible de sauvegarder les coordonnées d'écran d'un objet.
Pour rechercher les coordonnées, il faut ajouter les ordonnées et les abscisses de l'élément parent (
offsetParent) .
fonction Write(name, contenu):
Le contenu du "layeraffiche" est modifié de façon dynamique.
Cette même fonction, utilisée sur le layer "lelayer", positionné de façon relative, n'aurait aucun effet avec le navigateur Netscape.
| |
Principe: affecter des positions avec une
ancre
ou une
image
et lire les propriétés "x" et "y" ou respectivement
offsetLeft
et
offsetTop.
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
<!--
var ie = document.all ? true : false;
var ns = document.layers ? true : false;
var actuel = 0;
var nombre = 4;
function DeplaceLayer()
{
if (++actuel == nombre) actuel = 1;
if (ns) {
var pos = document.anchors['Position'+actuel];
if (!pos)
pos = document.images['Position'+actuel];
with (document.lelayer) {
pageX = pos.x;
pageY = pos.y;
visibility = 'show';
}
}
else if (ie) {
var pos = document.all['Position'+actuel];
with (document.all.lelayer.style) {
posLeft = getLeft(pos);
posTop = getTop(pos);
visibility = 'visible';
}
}
}
function getLeft(l)
{
if (l.offsetParent) return (l.offsetLeft + getLeft(l.offsetParent));
else return (l.offsetLeft);
}
function getTop(l)
{
if (l.offsetParent) return (l.offsetTop + getTop(l.offsetParent));
else return (l.offsetTop);
}
//-->
</script>
</head>
<body onLoad="DeplaceLayer()">
<div id="lelayer" style="position: absolute; visibility: hidden">contenu</div>
<table border=1 cellspacing=0 cellpadding=0 width="100%">
<tr>
<td width="10%"><a name="Position1"> </a></td>
<td width="50%"><img src="spacer.gif" width=1 height=1 name="Position2" alt=""></td>
<td width="40%"> <br>
<a name="Position3"> </a></td>
</tr>
</table>
<a href="javascript:DeplaceLayer()">Position suivante</a>
</body>
</html>
|
Trois endroits dans le document sont marqués au moyen d'images et d'ancres. Lors du chargement du document, le layer est affiché à la position1 (ancre), à chaque fois que le lien est cliqué, le layer est repoussé à la position suivante.
Cette solution est la plus risquée. Sous certaines circonstances, elle ne fonctionne pas étant donné que les propriétés "x" et "y" ne contiennent que la position relative par rapport à l'élément parent.
fonction MoveLayer():
Il est recherché si la position suivante a été déterminée avec une ancre ou une image.
Ensuite le layer est repoussé et affiché à l'endroit de l'ancre ou de l'image.
fonction getLeft() et getTop():
Même principe que celui de la solution 1.
| |
Douloureuse expérience pour de nombreux concepteurs Web: la
commande CSS
a:hover
ne fonctionne pas dans le navigateur Netscape.
Il n'y a pas de solution universelle pour ce problème. Mon idée a été de créer un script aussi court et facile à actualiser que possible, qui représente au moins un succédané comparable.
L'idée: chaque lien a des propriétés "x" et "y", avec lesquelles les coordonnées du lien peuvent être déterminées avec fiabilité dans 90% des cas.
Le texte du lien se trouve dans la propriété "text".
Donc: avec onMouseOver on place un layer sur le lien et on formate le texte du layer avec les CSS.
<html>
<head>
<style type="text/css">
<!--
a:link { color:#0FA00F; }
a:hover { color:#000000; font-style:italic; text-decoration:none; }
a.hover { color:#000000; font-style:italic; text-decoration:none; }
//-->
</style>
</head>
<body bgColor="#F0F0F0">
<script language="JavaScript1.2" type="text/javascript">
<!--
var ns = document.layers ? true : false;
function HoverInit()
{
if (onLoadOld)
onLoadOld();
tmpLayer = new Layer(1);
tmpLayer.bgColor = document.bgColor;
}
var obj = null;
var tmpLayer = null;
var onLoadOld = null;
if (ns) {
if (window.onload)
onLoadOld = window.onload;
window.onload = HoverInit;
document.captureEvents(Event.MOUSEOVER);
document.onmouseover = Hover;
}
function Hover(evt)
{
document.routeEvent(evt);
if (tmpLayer && tmpLayer.visibility == 'hide' && evt.target.text) {
obj = evt.target;
tmpLayer.left = obj.x;
tmpLayer.top = obj.y;
tmpLayer.width = 1;
with (tmpLayer.document) {
open();
write('<nobr><a href="'+obj.href+'" class="hover"' +
(obj.target ? ' target="' + obj.target + '"' : '') +
'>'+obj.text+'</a></nobr>');
close();
}
tmpLayer.visibility = 'show';
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Hoveroff;
}
}
function Hoveroff(evt)
{
if (tmpLayer && evt.target != tmpLayer.document.links[0] && evt.target != obj) {
tmpLayer.visibility = 'hide';
document.releaseEvents(Event.MOUSEMOVE);
}
}
//-->
</script>
<center><a href="javascript:alert('premier lien')">| premier lien |</a></center>
<br><br>
<a href="javascript:alert('ne sois pas si curieux')">| et encore un... |</a><br><br>
</body>
</html>
|
L'idéal est de sauvegarder le script comme script externe.
Le formatage pour l'effet Hover sera déterminé dans le navigateur Netscape grâce à la mention de feuille de style a.hover (et non pas a:hover).
En passant dans notre exemple sur un lien avec la souris, celui-ci n'est plus souligné mais affiché en italique.
fonction HoverInit():
Lors du chargement du document, un layer est crée pour l'effet Hover et sa couleur de fond est réglée sur celle du document.
fonction Hover(evt):
Le layer ici créé est positionné à la place du lien souligné, et son contenu est reformaté en italique.
fonction Hoveroff(evt):
Le layer est caché.
|
|
| SELFHTML actuel Articles spécialisés HTML dynamique |
