Discussion :

[calitom]

Bonjour,

Je cherche à ajouter en javascript un div, et le placer devant une image.

Donc il y a un div conteneur qui contient l'image, et je voudrais ajouter un div avec une couleur en background devant l'image...
En gros voici le code html avant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="conteneur" style="OVERFLOW: hidden; WIDTH: 390px; POSITION: relative; HEIGHT: 390px">
<IMG id="image" style="LEFT: 0px; POSITION: relative; TOP: 0px" height=390 src="image.jpg" width=531>
</div>

Et pour placer mon div, je pensais faire en sorte d'obtenir ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div id="conteneur" style="OVERFLOW: hidden; WIDTH: 390px; POSITION: relative; HEIGHT: 390px">
<IMG id="image" style="LEFT: 0px; POSITION: relative; TOP: 0px" height=390 src="image.jpg" width=531>
<DIV id="div_au_dessus_image" style="LEFT: 0px; POSITION: relative; TOP: 0px; BACKGROUND-COLOR: #ac7a03" width="390px" height="390px"></DIV>
</div>

Déjà est ce que s'est la bonne solution d'un point de vue html pour placer un masque de couleur devant mon image?

Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var a = document.createElement('div');
a.id="div_au_dessus_image";
a.style.position="relative";
a.style.left="0px";
a.style.top="0px";
a.height="390px";
a.width="390px";
a.style.backgroundColor = "#AC7A03";
document.getElementById('conteneur').appendChild(a);

Merci pour vos réponses...

[jln13]

salut,

plusieurs remarques :o)

1) si tu veux ajouter un masque ca veut dire que tu veux voir l'image quand le masque est dessus ? Le code que tu fournis te cachera completement l'image. Si tu veux voir l'image sous le masque il faut que tu ajoutes les proprietes de transparence :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);

2) ensuite, pour le positionnement de ton div je recupererais plutôt les coordonnées en absolute de l'image (ainsi que ses dimensions) et je positionnerai le div en absolute

(Apres je suis pas un pro css mais je pense que c'est la solution la moins prise de tete)

a+