Bonjour,

Je voudrais pouvoir créer des layers en série qui ne diffèrent que par un ou deux ou trois paramètres.
Je pense qu'en html ce n'est pas possible à cause de l'absence de variables.
Est-ce possible en javascript?

Merci pour votre aide si c'est possible.

C'est quoi que t'appelles "layer" ? Quand même pas la balise html qui date de la pré histoire créée pour netscape ?

LAYER , définiton du mot LAYER , Calque en français..

Merci de ne pas prendre les gens de haut, je sais que layer c'est calque merci...

Seulement en développement web rien ne s'appelle layer (si ce n'est la balise dont je parle plus haut). Le seul autre layer que je puisse connaitre est, si je me rappelle bien, une appellation à la con (oui je pense que c'est au moins le mot) pour des div dans dreamweaver (quand on fait des div en mode assisté si je me rappelle bien)

J'avoue flamel, les calques, c'est quand même vague, dans le contexte d'un site web. Peux-tu expliciter un peu tout ça ?

Bonjour,
Merci golmote de parler calmement.
J'utilise Dreamweaver depuis pas mal de temps et j'apprécie les "layer" ou "calque", plus faciles à utiliser que les tableaux.
Je voudrais pouvoir les créer en série sur certaines pages si je pouvais utiliser une boucle du genre "for/next" et ne changer que quelques variables.
Je n'ai pas la solution.
Merci.

et à quoi correspondent les variables... ?

Alors, les "layers" de dreamweaver sont en fait (comme je l'ai dit plus haut) des div en position absolute (de mémoire - il suffirait de regarder le code généré pour en être sûr).

Donc oui c'est tout à fait possible de le faire : une fonction qui fait un createElement('div') en prenant en paramètre son top et left et la mettait ensuite en absolute.

Citation : flamel

Merci golmote de parler calmement.

J'ai répondu calmement, c'est juste qu'il est stupide de la part d'adobe d'appeler des div "calques", ça embrouille les gens et leur fait apprendre un vocabulaire incorrect.

Merci k1rby.

Pourtant un <div> n'a pas des dimensions comme un calque.
Ce que j'appelle "layerX" pourrait donc aussi bien s'appeler #cadreX" ou autre chose ? et on le place toujours entre deux <div> ?
Pourrais-tu me montrer un petit exemple de boucle sans vouloir trop t'importuner ?

Merci.

t'en as deux...

for(var i = 0; i < 10; i++){

}
var i = 0;
while(i < 10){

i++;
}

Merci birdy42.

La boucle "for", je connais, mais comment y placer le calque suivant :

#Layer_01 {position:absolute; left:10px; top:200px; width:400px; height:400px; z-index:1}

dans lequel les variables pourraient être :
layer_01, layer _02, layer_03, etc
les valeurs pour left correspondant à chaque calque
les valeurs pour top correspondant à chaque calque

(les variables étant dans un tableauà 3 dimensions)

Et ainsi d'un coup faire plusieurs calques ?

#Layer_01 {position:absolute; left:10px; top:200px; width:400px; height:400px; z-index:1}
ça, c'est du CSS...
bref, ce que tu pourrais faire c'est :

<script type="text/javascript">
var div;
for(var i = 0; i<10;i++){
	div = document.createElement("div");
	div.style.cssText = "position:absolute; left:10px; top:200px; width:400px; height:400px; z-index:1";
	div.id = "layer_0"+i;
	document.body.appendChild(div);
	div.innerHTML = i;
}
</script>

Voilà ce que je propose :

var calques=[{top:'10',left:'10'},{top:'20',left:'20'}], //un tableau contenant des objets au format JSON, j'ai mis des valeurs comme exemple, mets ce que tu veux
div;
for(var i=0,count=calques.length;i<count;i++){
    div=document.createElement('div');
    div.style.position='absolute';
    div.style.top=calsques[i].top+'px';
    div.style.left=calques[i].left+'px';
    div.style.zIndex='1';
    div.id='layer_0'+(i+1);
    document.getElementsByTagName('body')[0].appendChild(div);
}

Merci. C'est ce que je cherchais.
Je vais apprendre
createElement et getElementsByTagName
que je ne connaissais pas.

Merci encore pour l'aide.

Pense à mettre ton sujet en résolu à l'aide du lien en bas de page

Sujet malheureusement non résolu, ca ne marche pas.
Je ne pouvais plus poster avant 24 heures !

Voici ce que j'ai fait :

<SCRIPT LANGUAGE="JavaScript">
var calques=[{top:'10',left:'10',width:'20',height:'20',background-color: '#FFFF00'},{top:'50',left:'50',width:'20',height:'20',background-color:' #FFFF00'}], //un tableau contenant des objets au format JSON, j'ai mis des valeurs comme exemple, mets ce que tu veux
div;
for(var i=0,count=calques.length;i<count;i++)){
	div=document.createElement('div');
	div.style.position='absolute';
	div.style.top=calques[i].top+'px';
	div.style.left=calques[i].left+'px';
	div.style.width=calques[i].width+'px';
	div.style.height=calques[i].height+'px';
	div.style.background-color=calques[i].background-color;
	div.style.zIndex='1';
	div.id='layer_0'+(i+1);
	document.getElementsByTagName('body')[0].appendChild(div);
}
</script>

Qu'est-ce que j'ai mal fait. Merci de m'aider.

ça ne marche pas non plus. ça donne une page blanche, sans calque.

Citation : birdy42

div.style.backgroundColor=calques[i].background-color;

En changeant les noms dans les objets JSON.

Il y a également une parenthèse fermante de trop à la fin du for

Au final :

var calques=[{top:'10',left:'10',width:'20',height:'20',backgroundColor: '#FFFF00'},{top:'50',left:'50',width:'20',height:'20',backgroundColor:' #FFFF00'}], //un tableau contenant des objets au format JSON, j'ai mis des valeurs comme exemple, mets ce que tu veux
div;
for(var i=0,count=calques.length;i<count;i++){
	div=document.createElement('div');
	div.style.position='absolute';
	div.style.top=calques[i].top+'px';
	div.style.left=calques[i].left+'px';
	div.style.width=calques[i].width+'px';
	div.style.height=calques[i].height+'px';
	div.style.backgroundColor=calques[i].backgroundColor;
	div.style.zIndex='1';
	div.id='layer_0'+(i+1);
	document.getElementsByTagName('body')[0].appendChild(div);
}

Ah je crois savoir, tu ne peux pas mettre de "-"(tiret) dans les noms de variables JS... donc, le background-color dans objet ira pas non plus...

Citation : birdy42

Ah je crois savoir, tu ne peux pas mettre de "-"(tiret) dans les noms de variables JS...

C'est tout à fait ça. Rappelons que - c'est l'opérateur de soustraction, ça n'a donc rien à faire dans un nom de variable (il comprend pas et c'est normal :p)

C'est d'ailleurs pour cette raison que les propriétés CSS comprenant un - sont en lowerCamelCase

J'avais la flemme de mettre edit:grilled avant

Mais j'ai compris pourquoi maintenant en plus, merci pour la 'tit' explication

ça ne marche pas ! !

Voici la totalité du script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>

<SCRIPT LANGUAGE="JavaScript">

var calques=[{top:'10',left:'10',width:'20',height:'20',backgroundColor: '#FFFF00'},{top:'50',left:'50',width:'20',height:'20',backgroundColor:' #FFFF00'}], //un tableau contenant des objets au format JSON, j'ai mis des valeurs comme exemple, mets ce que tu veux
div;
for(var i=0,count=calques.length;i<count;i++){
	div=document.createElement('div');
	div.style.position='absolute';
	div.style.top=calques[i].top+'px';
	div.style.left=calques[i].left+'px';
	div.style.width=calques[i].width+'px';
	div.style.height=calques[i].height+'px';
	div.style.backgroundColor=calques[i].backgroundColor;
	div.style.zIndex='1';
	div.id='layer_0'+(i+1);
	document.getElementsByTagName('body')[0].appendChild(div);
}
</SCRIPT>

</head>

<body>

<div layer_01>
Texte pour essai
</div>
</body>
</html>

Merci de ne pas vous lasser.

Y a pas un message d'erreur dans la console ?


là, éventuellement...

Le body n'est pas encore chargé au moment où le script s'exécute. Fais comme ceci :

window.onload=function() {

var calques=[{top:'10',left:'10',width:'20',height:'20',backgroundColor: '#FFFF00'},{top:'50',left:'50',width:'20',height:'20',backgroundColor:' #FFFF00'}], //un tableau contenant des objets au format JSON, j'ai mis des valeurs comme exemple, mets ce que tu veux
div;
for(var i=0,count=calques.length;i<count;i++){
	div=document.createElement('div');
	div.style.position='absolute';
	div.style.top=calques[i].top+'px';
	div.style.left=calques[i].left+'px';
	div.style.width=calques[i].width+'px';
	div.style.height=calques[i].height+'px';
	div.style.backgroundColor=calques[i].backgroundColor;
	div.style.zIndex='1';
	div.id='layer_0'+(i+1);
	document.body.appendChild(div);
}

};

Et j'ai raccourci en document.body , c'est plus court !

Citation : birdy42

document.body.appendChild(div);

Peut-être que K1rby a une explication de pourquoi il utilise gebtn[0] ?

J'obtiens enfin un calque, mais un seul. La boucle semble ne pas marcher.

quel navigateur ?
des erreurs dans la console d'erreur ?

Citation : birdy42

Peut-être que K1rby a une explication de pourquoi il utilise gebtn[0] ?

Ben en fait, j'ai toujours eu la flemme d'aller voir sur quirksmode si document.body est cross browser

Edit: j'ai réparé mon erreur, c'est crossbrowser, je vais donc l'employer

il est ok avec IE et FF c'est sûr, les autres, je pense aussi...