Trucsweb.com

Trucsweb 1997-2017

Le site des Trucsweb a maintenant 20 ans! 20 ans de gratuit mur-à-mur, peu importe que vous soyez à Montréal, Paris ou Ouagadougou, que vous soyez riche, pauvre ou éducateur ; -). « C’est un endroit que chacun peut visiter pour apprendre et partager ses connaissances » pour paraphraser Wikipédia. C’est aussi des milliers de dollars déboursés pour les couts d’un serveur Web. La publicité c’est bien, mais trop peu pour payer les frais d’hébergement toujours plus cher.

Il va sans dire que je m'adresse beaucoup aux institutions d'enseignement et aux corporations, particulièrement les géants de ce monde qui bénéficie de PROMOTION GRATUITE sur les sites des webmestres comme celui des Trucweb! Les Google et Microsoft de ce monde. Le fournisseur d'hébergement des Trucsweb qui a bénéficié d'une grande visibilité certainement pas étrangère a son succès. Mais aussi l'Organisation internationale de la Francophonie par exemple. Car la majorité des visiteurs des Trucsweb proviennent de l'ensemble des pays de la francophonie. Pays pour la plupart, outre la France, du berceau de l'humanité et surtout des plus pauvres de notre brillante civilisation.

Où va votre don : essentiellement pour payer la carte de crédit (surtout les intérêts) utilisée pour payer le serveur et la bande passante. Le maintien et le développement étant absolument bénévole, avec grand plaisir, depuis 1997!

jours restants pour la campagne de financement 2017-2037 ;- )
Objectif : 5000 €

Je vous remercie d’envisager de faire un don afin de perpétuer cette longue tradition francophone qui a maintenant 20 ans.

Merci,
Django Blais, L’Isle-Verte (Québec)

DHTML

Introduction au HTML dynamique

RDFFav

Modifier le contenu et la position des objets en DHTML - Compatible Netscape 6

Modifier les propriétés d’un objet ou « layer » sur une page HTML est pratique mais imaginez le dynamisme d’une page qui permet aux visiteurs de modifiant le contenu de l’objet. Déclarer un objet avec la balise « DIV » et modifier son contenu avec n’importe quel code HTML, des images, des tables, du texte...dhtml liens changement changer contenu texte dynamique position layer netscape 6 compatible propriétés div absolute style top left class id document write getElementById innerHTML pixelLeft pixelTop onMouseOver onMouseOut rollover réactive

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

Modifier les propriétés d’un objet ou « layer » sur une page HTML est pratique mais imaginez le dynamisme d’une page qui permet aux visiteurs de modifiant le contenu de l’objet. Déclarer un objet avec la balise « DIV » et modifier son contenu avec n’importe quel code HTML, des images, des tables, du texte ou même d’autres objets.

Le principe est très simple si vous utilisez un positionnement " absolute ". Il peut devenir plus complexe avec un positionnement " relative " à cause de Netscape 4.x. Plus de 500 erreurs ont été répertoriés avec Netscape 4.x ! Pour plus d’information, lisez le tutoriel "Bugs et compatibilité du DHTML", et pour utiliser le positionnement "relative" voir le tutoriel "Régler le problème de position relative avec Netscape 4.x"

Dans cet exemple, j’initialise les propriétés de départ dans une feuille de style (CSS) externe. En anglais " ex-doc " contrairement à " in-line ". Initialisé avec un positionnement " absolute ", c’est à dire par rapport au coin supérieur gauche de la Window.

 

Exemple

<head>
<style>
.monObjet {
  position: absolute;
  top: 50;
  left: 50 
}
</style>
</head>

Dans le body j’ajoute mon objet

<div class="monObjet" id="monObjet">Le DIV</div>

 

Pour modifier le contenu se fait exactement comme si vous désiriez modifier une propriété. Vous pouvez passer du code HTML directement ou initialiser une variable qui contient le code.

Avec Internet Explorer 4+

monObjet.innerHTML = Contenu;

Avec Netscpae 4.x

document.monObjet.document.write(Contenu);
document.eval(nObjet).document.close();
(pour règler un bug)

Et Netscape 6

document.getElementById(%27monObjet%27).innerHTML = Contenu;

 

Quand à la position x/y de l’objet

Avec Internet Explorer 4+

monObjet.style.pixelLeft= position x;
monObjet.style.pixelTop= position y;

Avec Netscpae 4.x

document.monObjet.left = position x;
document.monObjet.top = position y;

Et Netscape 6

document.getElementById(%27monObjet%27).style.left= position x;
document.getElementById(%27monObjet%27).style.top = position y;

 

Le but de cet exercice est de délacer les objets tout en modifiant leur contenu. Une fonction statique fera l’affaire mais pourquoi ne pas coder une fonction dynamique qui pourrait, à l’aide de paramètre, exécuter le tout pour n’importe quel objet. Une fonction portable à ajouter sur tous vos sites. L’exemple suivant est complet, portable et dynamique. Associé à l’initialisation des variables pour la détection du DOM, il fonctionne sans aucune modification.

 

Initialisation

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all


Fonction " Change_objet "

function Change_objet(nObjet,nContenu,nLeft,nTop) {
  // nObjet = le nom de l’objet
  // nContenu = Le contenu affiché dans l’objet
  // nLeft = La position x (de: haut gauche)
  // nTop = La position y (de: haut gauche)

  if (ns4) {
    document.eval(nObjet).document.write(nContenu);
    document.eval(nObjet).top =nTop;
    document.eval(nObjet).left =nLeft;
    document.eval(nObjet).document.close();
  }
  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;
  }
}

 

Exemple d’utilisation avec lien URL et initialisation de variable pour le contenu. Les deux variables " txt1 " et " txt2 " démontrent que l’objet peut non seulement contenir du texte mais aussi une table par exemple.

Initialisation du contenu dynamique

var txt1 = %27<table><tr><td> Autre code…</td></tr></table>%27;
var txt2 = %27<table><tr><td> Autre code…</td></tr></table>%27;

Dans le body j’ajoute mon objet

<div class="monObjet" id="monObjet">Le DIV</div>

Liens d’appel de la fonction " Change_objet "

<a href="#"
  onMouseOver="Change_objet(%27monObjet%27,txt1,1,1)"
  onMouseOut="Change_objet(%27monObjet%27,%27Le DIV%27,1,1)">
  Lien 1 </a>
<br>
<a href="#"
  onMouseOver="Change_objet(%27monObjet%27,txt2,75,20)"
  onMouseOut="Change_objet(%27monObjet%27,%27Le DIV%27,1,1)">
  Lien 2 </a>

 

Code complet 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(%27monObjet%27,%27txt1%27,1,1)). Vous pouvez aussi ajouter un objet, ex: Change_objet(%27monObjet2%27,%27txt1%27,1,1) sans oublier de déclarer ce deuxième objet (DIV). 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>Modifier le contenu</title>

<style>
  .monObjet {
    position: absolute;
    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(nObjet,nContenu,nLeft,nTop) {
  // nObjet = le nom de l’objet
  // nContenu = Le contenu affiché dans l’objet
  // nLeft = La position x (de: haut gauche)
  // nTop = La position y (de: haut gauche)

  if (ns4) {
    document.eval(nObjet).document.write(nContenu);
    document.eval(nObjet).top =nTop;
    document.eval(nObjet).left =nLeft;
    document.eval(nObjet).document.close();
  }
  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>
<div class="monObjet" id="monObjet">Le DIV</div>
<br><br><br>
<a href="#"
  onMouseOver="Change_objet(%27monObjet%27,txt1,1,1)"
  onMouseOut="Change_objet(%27monObjet%27,%27Le DIV%27,1,1)">
  Lien</a><br>
<a href="#"
  onMouseOver="Change_objet(%27monObjet%27,txt2,75,20)"
  onMouseOut="Change_objet(%27monObjet%27,%27Le DIV%27,1,1)">
  Lien</a> 
</body>
</html>
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

       Visites : 1733 - Pages vues : 28389
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

.
@