C'est encore moi :-),
Mettre des fonctions dans des loops c'est interdit, j'ai bien compris sauf que je sèche pour réinterpréter mon code autrement. Voici mon code complet :
Et voici la partie qui ne va pas. L'idée du code c'est de récupérer toutes les balise <img> ayant un id commencent par "image_sousmenu". Une fois que c'est fait on récré des balises <img> avec la même image de taille différente que l on inclue dans une balise <div> qui elle même sera inclue dans la balise <bod>. Mais ceci ne se produit que lorsque l'on a cliqué sur une des image de base. donc j'ai mis mon évènement dans un loop car je ne vois pas comment faire autrement.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 <script type="text/javascript"> // Compatibilité du onclik sur les différents browser function addEventSimple(obj,evt,fn){ if (obj.addEventListener) obj.addEventListener(evt,fn,false); else if (obj.attachEvent) obj.attachEvent('on'+evt,fn); } // Récupère toutes les images avec un id commencant par image_sousmenu[i] ou i commence à 0 cf php-menubdd_membre_image.php($x en php) mes_images = document.getElementsByTagName('img'); var nombre_images = 0; for (i = 0;i < mes_images.length; i++) { if (mes_images[i].id.indexOf('image_sousmenu')!=-1) { nombre_images += 1; } } // on créé la balise qui contiendra les images newdiv = document.createElement('div'); newdiv.id = 'conteneur_image_splash'; // on lui attribue les propirétés css 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)'; // On a le nombre d'image commencant par sousmenu et on les enregistre dans images_triees pour récupérer leurs propriétés et on crée les images en grand for(y = 0;y < nombre_images.length; y++) { images_triees[y] = document.getElementByID('image_sousmenu'+y); addEventSimple(images_triees[y],'click', fonction() { images_splash[y] = document.createElement('img'); // On récupère les attribut src alt & title de l'image de base images_splash[y].style.src = images_triees[y].src; images_splash[y].style.alt = images_triees[y].alt; images_splash[y].style.title = images_triees[y].title; // on crée les propriété CSS images_splash[y].style.position = 'absolute'; images_splash[y].style.width = '400px'; images_splash[y].style.height = '400px'; images_splash[y].style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille) images_splash[y].style.marginTop = '-200px'; images_splash[y].style.top = '50%'; images_splash[y].style.left = '50%'; // on inclut l'image dans la balise div créé plus haut newdiv.appendChild(images_splash[y]); // on inclut la balise div dans la balise body balise_body = document.getElementsByTagName('body'); balise_body[0].appendChild(newdiv); }); }
D'avance merci à ceux qui se pencheront sur mon problème.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 for(y = 0;y < nombre_images.length; y++) { images_triees[y] = document.getElementByID('image_sousmenu'+y); addEventSimple(images_triees[y],'click', fonction() { images_splash[y] = document.createElement('img'); // On récupère les attribut src alt & title de l'image de base images_splash[y].style.src = images_triees[y].src; images_splash[y].style.alt = images_triees[y].alt; images_splash[y].style.title = images_triees[y].title; // on crée les propriété CSS images_splash[y].style.position = 'absolute'; images_splash[y].style.width = '400px'; images_splash[y].style.height = '400px'; images_splash[y].style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille) images_splash[y].style.marginTop = '-200px'; images_splash[y].style.top = '50%'; images_splash[y].style.left = '50%'; // on inclut l'image dans la balise div créé plus haut newdiv.appendChild(images_splash[y]); // on inclut la balise div dans la balise body balise_body = document.getElementsByTagName('body'); balise_body[0].appendChild(newdiv); }); }
Partager