appendchild & removechild
Bonjour à tous,
en fait j'ai un code javascript qui une fois que l'on clique sur l'image une fonction reprend cette dernière la copie et la met en grand au milieu de l'écran avec un appendchild. Jusqu'à là tout va bien. Maintenant je voudrais lorsque l'on clique en dehors de cette image agrandie, ça enlevé ce qui a été mis par la première fonction mais je n'y parviens pas. Sachant que les deux code fonctionne très bien séparément, je pense que c'est dans le raisonnement que je suis faux donc si vous avez des pistes je suis preneur voici pour le code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" />
</head>
<body id="baba">
<div id="bobo">
<img id="image" src="images/bfra/bb/boissonsSucrees.jpg" alt="boubiboulga" title="boubiboulga" style="width: 100px; height: 100px"/>
</div>
<script type="text/javascript">
// code - 1
//implémente en cas de click sur l image
var image = document.getElementById('image');
var alreadyClick = 0;
image.addEventListener('click', function(){
if (alreadyClick != 1)
{
// Création de la div avec les propriétés CSS
var newdiv = document.createElement('div');
newdiv.style.zIndex = '95';
newdiv.style.position = 'absolute';
newdiv.style.top = '0px';
newdiv.style.left = '0px';
newdiv.style.width = '100%';
newdiv.style.height = '100%';
newdiv.style.backgroundImage = 'url(image/permanente/fond_translucide.png)';
newdiv.id = 'bebe';
// Création de l'image avec les propriétés CSS
var image = document.createElement('img');
image.style.position = 'absolute';
image.style.width = '400px';
image.style.height = '400px';
image.style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille)
image.style.marginTop = '-200px';
image.style.top = '50%';
image.style.left = '50%';
image.src='images/bfra/bb/boissonsSucrees.jpg' ;
image.alt='boubiboulga' ;
image.title='boubiboulga';
newdiv.appendChild(image);
document.getElementById("baba").appendChild(newdiv);
alreadyClick = 1;
}
}, false);
// code 2
// Annule l'implémentation en cas de click sur le div de l'implémentation
var deletediv = document.getElementById('bebe');
deletediv.addEventListener('click', function(){
document.getElementById('baba').removeChild(deletediv);
alreadyClick = 0;
}, false);
</script>
</body>
</html> |
je crois que je n'arrive pas à recupérer avec getElementById la div implémentée en javascript dans le code 1.
d'avance merci à ceux qui prendront du temps pour m'aider ;)
