Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Créer des calques (DIV) avec Javascript.

4 réponses
Avatar
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.

4 réponses

Avatar
Bertrand B
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

Avatar
cgyed
Oui c'est possible bien sur ...

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


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

Merci,

EB.

Avatar
Etienne Baudin
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'><img src='cadres.png' border=0>CECI EST MON DIV</div>

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

<script language="JavaScript1.2" type="text/javascript">

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 = "<img src='cadres.png' border=0>CECI EST MON DIV";

</script>

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

Merci d'avance,
EB.

Avatar
Bertrand B

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'><img src='cadres.png' border=0>CECI EST MON
DIV</div>

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

<script language="JavaScript1.2" type="text/javascript">

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 = "<img src='cadres.png' border=0>CECI ES T MON
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.