Manipuler des calques en javascript

Manipuler des calques en javascript

Pour commencer, une petite définition et mise au point sur les calques :

Les calques (ou layers ou encore boîtes flottantes sous Golive) sont des zones délimitées de la page matérialisées par les balises :
<div></div> ou <span></span>

Nous utiliserons ici la balise <div>

Les calques sont intimenent liés aux feuilles de styles car leurs propriétés sont justement définies par des feuilles de styles, soit par une feuille de style intraligne, soit en appelant une classe de feuille de style.

Parfois ayant mauvaise réputation pour leur incompatibilité avec certains navigateurs, il est tout de même possible de les gérer parfaitement en s'y plongeant d'un peu plus près.

Les exemples présentés ici sont à priori totalement compatibles IE et NN, PC ou Mac le seul petit hic vient d'un bug interne à NN 4.x qui se met subitement à très mal gérer les calques lorsque l'on redimensionne la fenêtre du navigateur, mais Dreamweaver intègrera automatiquement à toute page créée avec des calques un script paliant ce pb.
D'autre part, il est difficile avec NN 4.5 de créer de nombreuses classes de style, le nombre de calques devient donc limité, ce qui n'est déjà plus le cas dans la mise à jour de NN 4.7.

Les attributs classiques de la balise <div>:

id : le nom du calque (obligatoire pour pouvoir manipuler le calque avec du javascript, pour NN 4.x éviter les “_” dans le nom du calque)
class : nom de la classe donnée à la feuille de style
style : feuille de style intraligne

Propriétés des calques apportées par les feuilles de style possibles (entre autres)

la méthode de positionnement : position:relative ou position:absolue
la distance au dessus du calque : top:50px
la largeur à gauche du calque : left:100px
la largeur : width:75px
la hauteur : height:75px
la visibilité : visibility:visible ou visibility:hidden ou visibility:default ou visibility:inherit (dans quel cas le calque hérite de l'attribut de son calque parent, pour les calques imbriqués dans d'autres éléments)
la profondeur (1°, 2°plan…) : z-index:1 (ou le chiffre le + élevé sera au 1er plan)
la couleur de fond : background-color:#ffcc00 ou layer-background-color:#ffcc00 (préféré par NN, le mieux étant d'indiquer les 2 !!)
l'image de fond : background-image: url(img/mon_image.gif) ou layer-background-image: url(img/mon_image.gif) (préféré par NN, le mieux étant encore d'indiquer les 2 !!)
La façon dont les éléments dépassant du calque sont traités : overflow:hidden ou overflow:visible ou overflow:auto ou overflow:scroll (ce qui créra des barres de défilement), ne marchera convenablement dans NN 4.x que lorsque le calque sera imbriqué dans un autre élément (calque ou tableau par exemple) pour le hidden alors que le scroll n'est pas possible avec NN 4.x

Exemples de calques :

avec une feuille de style intraligne :

<div id="mon_calque" style="background-color:#ffcc00; layer-background-color:#ffcc00; position:absolute; top:10px; left:10px; width:100px; height:100px; visibility:visible"></div>

avec l'appel d'une classe :

Dans le <head> :

<style type="text/css">
<!--
.attributs {background-color:#ffcc00; layer-background-color:#ffcc00; position:absolute; top:10px; left:10px; width:100px; height:100px; visibility:visible}
-->
</style>

Dans le <body> :

<div id="mon_calque" class="attributs"></div>

NN 4.5 gérant mal les calques, il est préférable, si l'on veut avoir une compatibilité totale, d'utiliser la méthode B.
En effet, avec la méthode A, NN n'acceptera pas plus de 2 calques et ne prendra plus en compte vos feuilles de style pour les autres éléments de la page.

Pour NN, le calque ne doit pas être vide, il faut qu'il contienne du texte ou une image pour s'afficher et l'affichage de l'image ou de la couleur de fond s'adaptera à son contenu pour la largeur.
Si le calque fait 150px*150px mais que le texte ne le remplit pas entièrement et couvre une zone de 50px*50px, par exemple avec une couleur de fond, le calque apparaitra comme s'il était définit en 50px de largeur et 150px de hauteur.
Il est tjrs possible d'insérer dans le calque une images transparentes de 1px de haut et de l'étirer sur la longueur pour obtenir la taille du calque désirée ou de mettre le contenu du calque dans un tableau aux mesures souhaitées.
D'autre part, pour tous les navigateurs, si le contenu du calque dépasse la taille du calque, le calque sera automatiquement ajusté à la taille de son contenu si l'on a pas précisé de propriété overflow.

Maintenant que nous avons défini et positionné ces calques, nous allons enfin pouvoir les manipuler et modifier tous les attributs que nous leurs avons donné!

Netscape 4.x gérant les calques d'une façon qui lui est propre et unique, nous verrons d'abord les scripts et méthodes standards puis ceux qui lui sont spécifiques.

Pour les versions supérieures de IE 4 et NN 6, la méthode pour accéder au calque est la suivante :

document.getElementById("nomducalque")

Pour IE 4/5/6 (mais non reconnus par NN) :

document.all["nomducalque"]

il suffit ensuite de préciser que l'on va modifier sa feuille de style et quel attribut de sa feuille de style :

document.getElementById("nomducalque").style.visibilty
document.all["nomducalque"].style.left

Sous NN 4.x, la syntaxe est différente :

L'accès au calque se fait ainsi :

document.Layers["nomducalque"]

L'accès aux propriétés:

document.layers["nomducalque"].visibility
document.layers["nomducalque"].left

Dans les cas où les calques sont imbriqués, là encore il faut une syntaxe spécifique à NN 4.x, alors que pour les autres navigateurs, la syntaxe est la même que pour un calque simple :

document.layers["nomducalqueparent"].layers["nomducalqueenfant"].visibility

Donc pour réaliser maintenant des fonctions complètes, il faudra à chaque fois donner les instructions NN 4.x, IE 4 et les versions + récentes.

Voici maintenant quelques foctions pour manipuler vos calques :

Afficher un calque avec en paramètre le nom du calque :
Ne pas oublier lorsque l'on appelle la fonction de mettre le nom du calque entre ”” ou entre '' si la fonction est déjà dans des ”” ex:onmouseover=“afficher('moncalque')” :

function afficher(calque){
if (document.getElementById)
	document.getElementById(calque).style.visibility="visible";
if (document.all && !document.getElementById)
	document.all[calque].style.visibility="visible";
if (document.layers)
	document.layers[calque].visibility="visible";
}

Déplacer un calque + ou - lentement vers la droite jusqu'à un point donné, avec en paramètre la position finale et le nom du calque :

Nous allons utiliser en fait 3 fonctions :

Une qui permètra de déplaçer le calque
Une pour lui dire de se lancer
Une pour lui dire de s'arrèter.

La vitesse de défilement peux être modifiée en modifiant le nbre de pixel à incrémenter ou retirer, la fréquence de défilement choisie est 40miliseconde pour obtenir un défilement de 25img/s.
Les valeurs initiales de position du calque sont à donner en variable dans le script.

Le code complet :

<SCRIPT language="javascript">
<!--
timer=0;
x=50; //donner ici la position initiale du calque
 
function init_timer(){
	timer=1;
}
 
function stop_timer(){
	timer=0;
}
 
function avant(max,calq){
	maximum=max;
	calque=calq;
if (document.getElementById){
	document.getElementById(calque).style.left=x;
	}
if (document.all && !document.getElementById){
	document.all.style.left=x;
	}
if (document.layers){
	document.layers.left=x;
	}
if(timer==1 && x<maximum){
	setTimeout("avant(maximum,calque)",40);
 
	x+=7;
	}
}
 
//-->
</SCRIPT>

Qui pourra être appelée de la manière suivante :

<a href="#" onmouseover="init_timer();avant(500,'moncalque')" onmouseout="stop_timer()">

Si on positionne sa souris ici, le calque 'moncalque' va se déplacer jusqu'à être à 500px du bord mais le déplacement s'arrêtera si je bouge ma souris et quitte ce lien </a>

Pour y voir un peu plus clair :

timer=0;

on définit une variable qui lorsqu'elle sera égale à 1 (souris sur le lien) lancera le déplacement et lorsqu'elle sera égale à 0 le calque restera immobile ou arrêtera son déplacement.

x=50;

on affecte à x la position du calque “left” qui sera ensuite modifiée

function init_timer()

permet de valider pour le lancement du déplacement

function stop_timer()

permet d'arrêter le déplacement

if (document.getElementById){

pour IE > 4 et NN > 4.x

if (document.all && !document.getElementById){

pour IE 4

if (document.layers){

pour NN 4.x

document.getElementById(calque).style.left=x

on donne au calque sa nouvelle position qui est égale à x

if(timer==1 && x<maximum){

on lance le déplacement si timer=1, donc si la souris est sur le lien et si la position du calque est différente de celle souhaitée au final

setTimeout("avant(maximum,calque)",40);
x+=7

on fait appelle à une fonction interne à javascript : setTimeout() qui permet de lancer une fonction après un laps de tps définit en milisecondes : syntaxe : setTimeout(“mafonction()”,nb_de_milisecondes) puis on ajoute 7px à x

Le calque va donc se déplacer de 7px toutes les 40 milisecondes, tant que la souris sera sur le lien et/ou jusqu'à ce qu'il arrive à la position définitive.

Merci à Nanoum pour ce tutorial.

Forums Développement Multimédia

Manipuler des calques en javascript

Les attributs classiques de la balise <div>:

Propriétés des calques apportées par les feuilles de style possibles (entre autres)

Exemples de calques :