Créer des calques (DIV) avec Javascript.

Le
Etienne Baudin
Bonjour,

pour coder un menu, j'aimerais mettre en place un cadre contenant un
certain nombre de "choix" représentés par une vignette placée grâce aux
balises DIV. Chacune de ces vignettes contiennent un lien vers une page web.

Mon problème est que les calques sont (pour l'instant) codés en dur (8
vignettes = 8 déclarations 'DIV') dans le code html, et j'aimerais
automatiser en JS leur création en bouclant sur les numéros de calques
(pour permettre une meilleure souplesse en cas de rajout/suppression de
vignette). Pour l'instant, je ne peux que modifier (et pas créer) leur
caractéristiques (position, visibilité, etc.) via Javascript par :
document.getElementById("layer" + No_Vignette).style.attribut = valeur.

Est-ce que la création d' "objets HTML", particulièrement les calques,
via javascript est possible ? J'ai tout d'abord pensé à "eval" mais il
semble que l'on ne puisse qu'exécuter du code JS et non pas HTML

Merci d'avance,

EB.
  • Partager ce contenu :
Vos réponses
Trier par : date / pertinence
Bertrand B
Le #556526
Bonjour,

pour coder un menu, j'aimerais mettre en place un cadre contenant un
certain nombre de "choix" représentés par une vignette placée grâ ce aux
balises DIV. Chacune de ces vignettes contiennent un lien vers une page
web.

Mon problème est que les calques sont (pour l'instant) codés en dur (8
vignettes = 8 déclarations 'DIV') dans le code html, et j'aimerais
automatiser en JS leur création en bouclant sur les numéros de calq ues
(pour permettre une meilleure souplesse en cas de rajout/suppression de
vignette). Pour l'instant, je ne peux que modifier (et pas créer) leu r
caractéristiques (position, visibilité, etc.) via Javascript par :
document.getElementById("layer" + No_Vignette).style.attribut = valeu r.

Est-ce que la création d' "objets HTML", particulièrement les calqu es,
via javascript est possible ? J'ai tout d'abord pensé à "eval" mais il
semble que l'on ne puisse qu'exécuter du code JS et non pas HTML...

Merci d'avance,

EB.


Oui c'est possible bien sur ...

//il faut utiliser
var monCalque=document.createElement('div');
//Eventuelment rajouter les attributs que l'on veut (id class etc ...)
monCalque.setAttribute("class","maclasse");
monCalque.setAttribute("className","maclasse");
//mettre du contenu
monCalque.innerHTML=DuHtml;
//et si on veut le rajouter dans un calque précédement existant avec
comme id container
document.getElementById("container").appendChild(monCalque);

tu peux aussi regarder la méthode insertBefore.

J'en use et abuse dans mon "chtio blogue" (j'en ferai de la pub quand ç a
ramera moins ...).

PS : testé avec firefox et IE6

cgyed
Le #556525
Oui c'est possible bien sur ...

//il faut utiliser
var monCalque=document.createElement('div');


Très bien, c'est donc ça...;)

Merci,

EB.

Etienne Baudin
Le #556242
Oui c'est possible bien sur ...
Par contre j'ai un petit soucis avec une image accompagnée d'un tout

petit bout de texte :

la version en "statique" marche sans problème :

<div id='Fond_Menu' style='position: absolute; visibility:visible;
top:100px; left:100px'>
alors que dans Javascript suivant n'affiche rien, et le console JS de
firefox n'affiche rien :


var Fond_Menu = document.createElement('DIV');

Fond_Menu.setAttribute("id", "Id_Fond_Menu");

Fond_Menu.setAttribute("style", 'position: absolute;
visibility:visible; top:100px; left:100px');

Fond_Menu.innerHTML = "
</script>

Les deux scripts étant censés faire la même chose...
Ou est l'astuce ?

Merci d'avance,
EB.

Bertrand B
Le #556239

Oui c'est possible bien sur ...


Par contre j'ai un petit soucis avec une image accompagnée d'un tout
petit bout de texte :

la version en "statique" marche sans problème :

<div id='Fond_Menu' style='position: absolute; visibility:visible;
top:100px; left:100px'> DIV</div>

alors que dans Javascript suivant n'affiche rien, et le console JS de
firefox n'affiche rien :


var Fond_Menu = document.createElement('DIV');

Fond_Menu.setAttribute("id", "Id_Fond_Menu");

Fond_Menu.setAttribute("style", 'position: absolute;
visibility:visible; top:100px; left:100px');

Fond_Menu.innerHTML = " DIV";

</script>

Les deux scripts étant censés faire la même chose...
Ou est l'astuce ?

Merci d'avance,
EB.


tu as oublié d'insérer ton objetHTML Fond_Menu quelque part dans l'ar bre
du document ...

si tu veux l'insérer dans un calque appelé "menu"

document.getElementById("menu").appendChild(Fond_Menu);

Pour résumer tu crées ton morceau d'html puis tu l'insère dans l'ar bre
du document.


Poster une réponse
Anonyme