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.
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.
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
Très bien, c'est donc ça...;)
Merci,
EB.
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.
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.