logo xgarreau.org Quoi ma tête ?
xavier@xgarreau.org
DHTML
Version imprimable

Ceci est la première page d'une hypothétique série s'intéressant au DHTML. Le but de cette série est de mettre l'accent sur les choses qui fonctionnent dans les deux gros navigateurs du marché. Vous ne trouverez donc pas ici de scripts produisant des effets réservés à tel ou tel navigateur. Mais entrons dans le vif du sujet :
Ce premier script est relativement dense puisqu'il aborde :

  1. La création d'un "calque" ou "couche".
  2. La détection du navigateur, netscape ou explorer ? Et les spécificités de programmation liées à leurs différences.
  3. La modification de visibilité des "couches", à afficher ou cacher.
  4. La récupération du lieu des évènements.
  5. La détection de mouvements de souris et l'attribution de la gestion de cet évènement à une fonction.

J'ai ajouté à la fin de la page les sources html et javascript.

Normalement, vous avez déjà vu ce que fait ce script, sinon, si vous ne remarquez rien de particulier sur cette page, changez de navigateur (je l'ai essayé avec N4.7 et IE5). Pour cacher l'image ou la montrer, servez vous des liens ci-dessous.


CACHER ! MONTRER !


1. Création d'une "couche" :

Il existe plusieurs façons de créer et gérer des couches, mais celle-ci est passe partout...

On commence par définir le nom et le style de la couche, dans la partie head du fichier html.

<style type='text/css'>
	#mymmI {
		position:absolute;
		top:10px;
		left:10px;
	}
</style>
C'est à dire
que ce style à un nom, "mymmI".
que la position sera donnée en absolu par rapport au coin supérieur gauche de la page.
que la position initiale sera située à 10 pixels du haut de la page et 10 pixels de la gauche de la page.

NB : On peut ajouter des attributs, notamment width et height pour fixer les largeur et hauteur de la couche, ainsi que les attributs concernant le texte, les liens, le fond etc ... mais ici, on n'en a pas besoin.

Ensuite, vient la création proprement dite du calque et la définition de son contenu. Cette partie se situe dans le body, entre balises div.

<div id="mymmI">
	<!--
		l'attibut src doit pointer vers votre image
	-->
	<img src="animage.gif">
</div>

On peut mettre du texte, des images... entre les balises div. On affecte le style que nous avons défini avant en utilisant l'attribut id="mymmI".

2. Détection du navigateur :

Il faut savoir pour celà que Netscape définit l'objet document.layers et que explorer définit l'objet document.all, donc en testant l'existence de ces objets, on détermine le type de navigateur utilisé.
Par exemple, vous utilisez

Voici le code permettant d'afficher la phrase ci-dessus :

Par exemple, vous utilisez <b>
<script>
if (document.all) 
	document.write("un navigateur compatible MSIE.");
else if (document.layers)
	document.write("un navigateur compatible Netscape.");
else
	document.write("un navigateur ne prenant pas en charge les extensions précitées.");
</script>
</b>

3. Visibilité des couches :

Il faut pour celà modifier une propriété indiquant la visibilité ou non de la couche.

Dans Netscape, c'est document.layers.maCouche.visibility.
pour rendre visible une couche nommée "mymmI" : document.layers.mymmI.visibility=true;
pour rendre invisible une couche nommée "mymmI" : document.layers.mymmI.visibility=false;
Dans MSIExplorer, c'est document.all.maCouche.style.visibility.
pour rendre visible une couche nommée "mymmI" : document.all.mymmI.style.visibility='visible';
pour rendre invisible une couche nommée "mymmI" : document.all.mymmI.style.visibility='hidden';

Vous pouvez les essayer en cliquant sur les liens ci-dessous :
CACHER ! MONTRER !

4. Lieu des évènements :

Ici encore, ce n'est pas la même chose selon que vous utilisez Netscape ou Explorer

Dans Netscape,
le lieu de l'évènement event est donné en fonction du coin haut gauche du document.
en X : event.pageX
en Y : event.pageY
Dans MSIExplorer,
le lieu de l'évènement event est donné en fonction du coin haut gauche de la partie visible du document. C'est à dire que si vous avez utilisé les barres de défilement, pour savoir ou l'évènement à eu lieu, vous devez ajouter au lieu d'évènement la position actuelle de la partie visible relativement au document complet. C'est ce qu'on appelle se compliquer la vie mais chez Micro$oft, on aime ça !
en X : document.body.scrollLeft+window.event.clientX
en Y : document.body.scrollTop+window.event.clientY;

Vous pouvez vérifier ce que je viens de dire en regardant les coordonnées de votre souris dans le document, ci-dessous :
Essayez avec plusieurs navigateurs !


5. Détection des mouvements de souris et attribution de la gestion à une fonction :

Vous commencez par écrire une fonction prenant un paramètre e, par exemple :

<script>
mtm = function (e) {
	if (!document.all) {
		document.forms["explp4"].evtX.value=e.pageX;
		document.forms["explp4"].evtY.value=e.pageY;
	} else {
		document.forms["explp4"].scrX.value=document.body.scrollLeft;
		document.forms["explp4"].scrY.value=document.body.scrollTop;
		document.forms["explp4"].evtX.value=window.event.clientX;
		document.forms["explp4"].evtY.value=window.event.clientY;
	}
	return true;
}
</script>

Cette fonction exemple remplit les champs du formulaire de la partie 4 avec les "coordonnées de l'évènement". Dans la partie 4 il s'agit du déplacement de la souris.

Cette fonction marche, mais il faut maintenant qu'elle soit déclenchée lors d'un mouvement de souris.
Pour Netscape uniquement, il faut "capturer" les évènements de type mouvement de souris : document.captureEvents( Event.MOUSEMOVE );
Puis, pour tous, il faut affecter les évènements de mouvement à la fonction créée en utilisant : document.onmousemove=mtm;
Consultez l'exemple.

ANNEXE : La source minimale du fichier html :

<html>
<head>
	<style type='text/css'>
		#mymmI {
			position:absolute;
			top:10px;
			left:10px;
		}
	</style>
</head>
<body bgcolor="#ffffff" onload="return initmmI();">
<div id="mymmI">
	<!--
		l'attibut src doit pointer vers votre image
	-->
	<img src="animage.gif">
</div>
<script src="mmI.js" type="text/javascript" language="javascript">
</script>

<h1 align=center>DHTML : Exemple 1</h1>
<p align=center>
<a href="" onclick="return mmI.hide();">CACHER !</a>
<a href="" onclick="return mmI.reveal();">MONTRER !</a>
</p>
</body>
</html>

ANNEXE : La source du fichier javaScript :

var larg = 10; // width of movement
var haut = 10; // height of movement
var offsX = 0; // horiz offset between cursor and image
var offsY = 20; // vert offset between cursor and image (important to be able to click on links ;-) )
var mmI = {
	sensX : 1,
	sensY : 1,
	cX : larg,
	cY : 0,
	curX : larg,
	curY : haut,
	isIE : document.all ? true : false,
	layer : document[document.all ? "all" : "layers"]["mymmI"]
}

mmI.main_mm = function () {
	if ((this.curYthis.cY+haut))
		this.sensY*=-1;
	if ((this.curXthis.cX+larg))
		this.sensX*=-1;
	this.curX += 2*this.sensX;
	this.curY += 2*this.sensY;
	this.paint();
	return true;
}

mmI.hide = function() {
	if (this.isIE)
		this.layer.style.visibility='hidden';
	else
		this.layer.visibility=false;
	return false;
}

mmI.reveal = function() {
	if (this.isIE)
		this.layer.style.visibility='visible';
	else
		this.layer.visibility=true;
	return false;
}

mmI.paint = function() {
	if (this.isIE) {
		this.layer.style.pixelTop=this.curY + offsY;
		this.layer.style.pixelLeft=this.curX + offsX;
	} else {
		this.layer.top=this.curY  + offsY;
		this.layer.left=this.curX + offsX;
	}
}

function initmmI() {
	// Comment it out to have a static logo
	window.setInterval ("mmI.main_mm()", 50);
	
	if (!document.all)
		document.captureEvents( Event.MOUSEMOVE );
	document.onmousemove=mtm;
	return true;
}


mtm = function (e) {
	var xmov, ymov;
	if (!document.all) {
		xmov=e.pageX-mmI.cX;
		ymov=e.pageY-mmI.cY
		mmI.cX=e.pageX;
		mmI.cY=e.pageY;
	} else {
		xmov=document.body.scrollLeft+window.event.clientX-mmI.cX;
		ymov=document.body.scrollTop+window.event.clientY-mmI.cY
		mmI.cX=document.body.scrollLeft+window.event.clientX;
		mmI.cY=document.body.scrollTop+window.event.clientY;
	}
	mmI.curX+=xmov;
	mmI.curY+=ymov;
	mmI.paint();
	return true;
}

Voilà, c'est tout pour ce premier exemple.
A bientôt pour la suite ...

Auteur : Xavier GARREAU
Modifié Le 03.10.2000

Votre avis dans le forum.

Zazou Projets

Développement

Utilisation et culture

Ailleurs

Vieilleries

Bonne parole

Partenaire



Ce site existe depuis le 01/02/2003
Pour rapporter un bug : xavier@xgarreau.org.
Hébergement : Maneya.
Essayez ZazouMiniWebServer !
Votre avis dans le forum.