Trucsweb.com

Trucsweb.com

DHTML

Introduction au HTML dynamique

RDFFav

Régler le problème de position relative avec Netscape 4.x - en utilisant ilayer et layer

Le positionnement « relative » permet de positionner un objet relativement à sa position dans un document. Cette technique utilisée avec un objet « DIV », contrairement au positionnement « absolute », entraîne un certain nombre de problèmes quand vient le temps de manipuler les objets avec Netscape 4.x. La solution est de déclarer les objets.dhtml liens changement changer contenu texte dynamique position layer netscape 6 compatible propriétés div absolute ilayer layer style top left class id document write getElementById innerHTML pixelLeft pixelTop onMouseOver onMouseOut rolloverRégler le problème de position relative avec Netscape 4.x - en utilisant ilayer et layer

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : IE 4+, NS 4+ et Netscape 6
  • · Voir l’exemple

Le positionnement « relative » permet de positionner un objet relativement à sa position dans un document. Cette technique utilisée avec un objet « DIV », contrairement au positionnement « absolute », entraîne un certain nombre de problèmes quand vient le temps de manipuler les objets avec Netscape 4.x. La solution est de déclarer les objets à l’aide des balises « ilayer » et « layer » qui permettent un positionnement « relative » par défaut.

Dès que vous désirez une manipulation DHTML d’un objet " relative " et que vous désirez que votre code soit compatible Netscape 4.x, vous devez impérativement utiliser la balise " layer " et " ilayer ".

De plus, un positionnement " relative " qui change le contenu d’un objet doit prévoir l’espace maximum qu’occupera l’objet pour éviter le déplacement de tout ce qui se trouve après l’objet si ce dernier est plus grand que l’espace prévu. Avec IE4+ et Netscape 6 vous n’avez qu’à déclarer votre objet avec la balise <div> dans une table qui déterminer l’espace maximum de l’objet. Mais avec Netscape 4.x, l’utilisation de la balise <ilayer> permet aussi de réserver l’espace maximum.

 

Exemple avec IE4+ et NS6:

<table width="400" height="150">
<tr valign="top"><td>
<div class="monObjet" id="monObjet">Le DIV</div>
</td></tr></table>

Exemple avec NS4.x

<ilayer id="main" width=400 height=150 visibility=hide>
<layer id="monObjet" left=0 top=1 width=250>
Contenu de l’objet
</layer></ilayer>

 

Pour éviter certains problèmes, utiliser un test de DOM pour faire une seule déclaration.

<head>

<style>
  .monObjet { position: relative; top: 1; left: 1 }
</style>

<script type="text/javascript" language="javascript">
<!-
// Détection du DOM
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//  -->
</script>
</head>

<body>
<table width="400" height="150">
<tr valign="top"><td>
<script type="text/javascript" language="javascript">
  if (ns4){
    // Si Netscape 4.x utilisation du layer
    document.write(%27<ilayer id="main" width="400"
      height="150" visibility="hide">%27); 
    document.write(%27<layer id="monObjet" left="0"
      top="1" width="250">Le DIV%27);
    document.write(%27</layer></ilayer>%27);
  }
  else if (ie4||ns6){
    // Si IE+ ou Netscape 6, utilisation du DIV
    document.write(%27<div class="monObjet" id="monObjet">
      Le DIV</div>%27);
  }
</script>
</td></tr></table>
</body>

Ce code ne fait qu’afficher un " ilayer " et " layer " dans la table si Netscape 4.x est détecté ou afficher un DIV dans la table si c’est IE4+ ou Netscape 6. Ce code permet donc par la suite de manipuler l’objet " monObjet " sans problème même avec Netscape 4.x. La seule différence c’est que vous devez maintenant préciser le parent, soit " document.parent " pour Netscape 4.x

 

Exemple, si je reprends l’exemple du tutoriel " Modifier le contenu et la position des objets en DHTML " et que je veux modifier le contenu de mon objet avec NS4.x déclaré avec un " ilayer " parent.

document.parent.document.monObjet.document.write(%27nouveau contenu%27);

Noter l’ajout de " document.parent " c’est la seule différence. Donc, pour modifier le contenu et la position, la nouvelle procédure devrait être :

if (ns4) {
  document.parent.document.monObjet.top=nTop;
  document.parent.document.monObjet.left=nLeft;
  document.parent.document.monObjet.document.write(nContenu);
  document.parent.document.close();
  document.parent.visibility=%27show%27
}

 

Code complet du tutoriel " Modifier le contenu et la position des objets en DHTML " mais en position " relative " compatible IE4+, NS4.x et Netscape 6. C’est à dire que votre objet ne sera pas positionné x/y en fonction du coin supérieur gauche de la fenêtre mais en fonction du coin supérieur gauche de la table, son parent. Pratique pour manipuler dynamiquement un objet qui tient compte de la résolution de l’écran et du positionnement de données de la page HTML.

Vous n’avez qu’à modifier le contenu des variables "txt1" et "txt2" ou même d’ajouter des variables. Et d’ajuster les paramètres des liens URL (Change_objet(%27nomduparentNS4%27,%27monObjet%27,%27txt1%27,1,1)). Vous pouvez aussi ajouter un objet, ex: Change_objet(%27nomduparentNS42%27,%27monObjet2%27,%27txt1%27,1,1) sans oublier de déclarer ce deuxième objet (DIV) et (Layer). ATTENTION, copier coller ce code peut causer des problèmes à cause de la justification, utiliser le code de l’exemple (bouton en haut).

<html>
<head>

<title>Positionnement relatif</title>
<style>
  .monObjet {
    position: relative;
    top: 1;
    left: 1
  }
</style>

<script type="text/javascript" language="javascript">
<!--
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

var txt1 = %27contenu ou code html 1%27;
var txt2 = %27contenu ou code html 2%27;

function Change_objet(nNS4,nObjet,nContenu,nLeft,nTop) {
  if (ns4) {
    document.eval(nNS4).document.eval(nObjet).top=nTop;
    document.eval(nNS4).document.eval(nObjet).left=nLeft;
    document.eval(nNS4).document.eval(nObjet)
      .document.write(nContenu);
    document.eval(nNS4).document.close();
    document.eval(nNS4).visibility=%27show%27
  }
  else if (ns6) {
    document.getElementById(nObjet).innerHTML = nContenu;
    document.getElementById(nObjet).style.left=nLeft;
    document.getElementById(nObjet).style.top =nTop;
  }
  else if (ie4) {
    eval(nObjet).innerHTML = nContenu;
    eval(nObjet).style.pixelLeft=nLeft;
    eval(nObjet).style.pixelTop=nTop; 
  }
}
//  -->
</script>
</head>

<body>
<h2>Modifier le contenu et la position des objets en
DHTML avec un positionnement relatif</h2>
<h3>Compatible IE 4+, Netscape 4.x et Netscape 6</h3>
<table width="400" height="150">
<tr valign="top"><td>
<script type="text/javascript" language="javascript">
  if (ns4){
    document.write(%27<ilayer id="parent"
      width="400" height="150" visibility="hide">%27);
    document.write(%27<layer id="monObjet" left="0"
      top="1" width="250">Le DIV%27);
    document.write(%27</layer></ilayer>%27);
  }
  else if (ie4||ns6){
    document.write(%27<div class="monObjet"
      id="monObjet">Le DIV</div>%27);
  }
</script>
</td></tr></table>
<p> </p>
<p>Exemple, passer la souris sur les liens<br>
<a href="#"
  onMouseOver="Change_objet(%27parent%27,%27monObjet%27,txt1,1,1)"
  onMouseOut="Change_objet(%27parent%27,%27monObjet%27,%27Le DIV%27,1,1)">
  Lien 1</a>
<br>
<a href="#"
  onMouseOver="Change_objet(%27parent%27,%27monObjet%27,txt2,75,20)"
  onMouseOut="Change_objet(%27parent%27,%27monObjet%27,%27Le DIV%27,1,1)">
  Lien 2</a></p>
</body>
</html>
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 5194 - Pages vues : 25314
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@