Trouver la position d'une image avec getElementsByTagName

Version imprimable

je voudrais connaitre la page qui sera afficher dans chaque div dans l'ordre c'est à dire que je voudrais
connaitre dans une fonction Javascript le nom de mes premieres images c'est à dire le nom de la prmiere image de chaque div
en allant de gauche à droite puis passer à la seconde ligne.

Voici mon 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
 
  <fieldset id=Demo4>
   <legend>Composition du document <% = NomDoc %></legend>
   <div id='contenant'>
    <div class=DragContainer id='DragContainer1' overClass="OverDragContainer">
     <div class=DragBox id="Page<% = i %>" name="Page<% = i %>" overClass="OverDragBox" dragClass="DragDragBox" align="center">
      <img name="<% = i %>" src="Img/Ass/<% = NomDoc %>-<% = NumImg %>.jpg" height="150px" width="128px"><br>
      <b name="<% = i %>">Page <% = i %></b>
      <input OnClick="SuppJpg('<% = NumImg %>');" type="image" src="Img/PetitDelete.gif"> 
     </div>
    </div>
 
    <div class=DragContainer id='DragContainer1' overClass="OverDragContainer">
     <div class=DragBox id="Page<% = i %>" name="Page<% = i %>" overClass="OverDragBox" dragClass="DragDragBox" align="center">
      <img name="<% = i %>" src="Img/Ass/<% = NomDoc %>-<% = NumImg %>.jpg" height="150px" width="128px"><br>
      <b name="<% = i %>">Page <% = i %></b>
      <input OnClick="SuppJpg('<% = NumImg %>');" type="image" src="Img/PetitDelete.gif"> 
     </div>
    </div>
 
    <div class=DragContainer id='DragContainer1' overClass="OverDragContainer">
     <div class=DragBox id="Page<% = i %>" name="Page<% = i %>" overClass="OverDragBox" dragClass="DragDragBox" align="center">
      <img name="<% = i %>" src="Img/Ass/<% = NomDoc %>-<% = NumImg %>.jpg" height="150px" width="128px"><br>
      <b name="<% = i %>">Page <% = i %></b>
      <input OnClick="SuppJpg('<% = NumImg %>');" type="image" src="Img/PetitDelete.gif"> 
     </div>
    </div>
 
    <div class=DragContainer id='DragContainer1' overClass="OverDragContainer">
     <div class=DragBox id="Page<% = i %>" name="Page<% = i %>" overClass="OverDragBox" dragClass="DragDragBox" align="center">
      <img name="<% = i %>" src="Img/Ass/<% = NomDoc %>-<% = NumImg %>.jpg" height="150px" width="128px"><br>
      <b name="<% = i %>">Page <% = i %></b>
      <input OnClick="SuppJpg('<% = NumImg %>');" type="image" src="Img/PetitDelete.gif"> 
     </div>
    </div>
 
    <div class=DragContainer id='DragContainer1' overClass="OverDragContainer">
     <div class=DragBox id="Page<% = i %>" name="Page<% = i %>" overClass="OverDragBox" dragClass="DragDragBox" align="center">
      <img name="<% = i %>" src="Img/Ass/<% = NomDoc %>-<% = NumImg %>.jpg" height="150px" width="128px"><br>
      <b name="<% = i %>">Page <% = i %></b>
      <input OnClick="SuppJpg('<% = NumImg %>');" type="image" src="Img/PetitDelete.gif"> 
     </div>
    </div>
   </div>
  </fieldset>

et voici mon code Javascript :

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
 
    function OrdrePage(NbFile){
     var Image = document.getElementsByTagName('IMG');
     var array = new Array();
     var array2 = new Array();
 
     for(var i=0; i<=NbFile;i++){
      if(i == 0){
       var targObj = document.getElementById('Page1');
      }else if(i == 1){
       var targObj = document.getElementById('Page2');
      }else if(i == 2){
       var targObj = document.getElementById('Page3');
      }else if(i == 3){
       var targObj = document.getElementById('Page4');
      }else if(i == 4){
       var targObj = document.getElementById('Page5');
      }else if(i == 5){
       var targObj = document.getElementById('Page6');
      }else if(i == 6){
       var targObj = document.getElementById('Page7');
      }else if(i == 7){
       var targObj = document.getElementById('Page8');
      }
     }
 
     // Je coince ici pour récupérer le nom de mon div "Page1" par exemple
 
     document.DragAndDrop.OrdrePage.value = array;
     document.DragAndDrop.OrdrePage2.value = array2;
 
//     document.DragAndDrop.action='JpgToPdf.asp'
//     document.DragAndDrop.target = "_top";
//     document.DragAndDrop.method = "post";
//     document.DragAndDrop.submit();	
//     return true;
    }

un id doit être unique sur une page

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
<script type='text.javascript'>
function getFirstImages(){
var TabFirstImg=new Array();
var TabDivs=document.getElementsByTagName('div');
for (i=0;i<TabDivs.length;i++){
							if(TabDivs[i].getElementsByTagName('img')){
							                              TabFirstImg.push(TabDivs[i].getElementsByTagName('img')[0])
         }
         }
 
for (i=0;i<TabFirstImg.length;i++){document.write(TabFirstImg[i].id+ "<br/>")}         
        }
 
</script>    
 
 
</head>
 
<body onload="getFirstImages()">
 
 
<div>
<img id='firstimageone' />
<img id='secondimageone' />
</div>
<div>
<img id='firstimagetwo' />
<img id='secondimagetwo' />
</div>
 
<div>
<img id='firstimagethree' />
<img id='secondimagethree' />
</div>
 
 
</body>
</html>

mon code html :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
  <fieldset id=Demo4>
   <legend>Composition du document DANK@REPRO NEW</legend>
   <div id='contenant'>
    <div class=DragContainer id='DragContainer1' overClass="OverDragContainer">
 
          <div class=DragBox id="Page1" name="Page1" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="1" name="1" src="Img/Ass/DANK@REPRO NEW-001.jpg" height="150px" width="128px"><br>
           <b name="1">Page 1</b>
           <input OnClick="SuppJpg('001');" type="image" src="Img/PetitDelete.gif"> 
          </div>
 
          <div class=DragBox id="Page7" name="Page7" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="7" name="7" src="Img/Ass/DANK@REPRO NEW-007.jpg" height="150px" width="128px"><br>
           <b name="7">Page 7</b>
           <input OnClick="SuppJpg('007');" type="image" src="Img/PetitDelete.gif"> 
          </div>
 
    </div>
 
    <div class=DragContainer id='DragContainer2' overClass="OverDragContainer">
 
          <div class=DragBox id="Page2" name="Page2" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="2" name="2" src="Img/Ass/DANK@REPRO NEW-002.jpg" height="150px" width="128px"><br>
           <b>Page 2</b>
           <input OnClick="SuppJpg('002');" type="image" src="Img/PetitDelete.gif"> 
          </div>         
 
          <div class=DragBox id="Page8" name="Page8" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="8" name="8" src="Img/Ass/DANK@REPRO NEW-008.jpg" height="150px" width="128px"><br>
           <b>Page 8</b>
           <input OnClick="SuppJpg('008');" type="image" src="Img/PetitDelete.gif"> 
          </div>         
 
    </div>
 
    <div class=DragContainer id='DragContainer3' overClass="OverDragContainer">
 
          <div class=DragBox id="Page3" name="Page3" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="3" name="3" src="Img/Ass/DANK@REPRO NEW-003.jpg" height="150px" width="128px"><br>
           <b>Page 3</b>
           <input OnClick="SuppJpg('003');" type="image" src="Img/PetitDelete.gif"> 
          </div>         
 
    </div>
 
    <div class=DragContainer id='DragContainer4' overClass="OverDragContainer">
 
          <div class=DragBox id="Page4" name="Page4" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="4" name="4" src="Img/Ass/DANK@REPRO NEW-004.jpg" height="150px" width="128px"><br>
           <b>Page 4</b>
           <input OnClick="SuppJpg('004');" type="image" src="Img/PetitDelete.gif"> 
          </div>         
 
    </div>
 
    <div class=DragContainer id='DragContainer5' overClass="OverDragContainer">
 
          <div class=DragBox id="Page5" name="Page5" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="5" name="5" src="Img/Ass/DANK@REPRO NEW-005.jpg" height="150px" width="128px"><br>
           <b>Page 5</b>
           <input OnClick="SuppJpg('005');" type="image" src="Img/PetitDelete.gif"> 
          </div>         
 
    </div>
 
    <div class=DragContainer id='DragContainer6' overClass="OverDragContainer">
 
          <div class=DragBox id="Page6" name="Page6" overClass="OverDragBox" dragClass="DragDragBox" align="center">
           <img id="6" name="6" src="Img/Ass/DANK@REPRO NEW-006.jpg" height="150px" width="128px"><br>
           <b>Page 6</b>
           <input OnClick="SuppJpg('006');" type="image" src="Img/PetitDelete.gif"> 
          </div>         
 
    </div>
   </div>
  </fieldset>

j'ai créer deux input text et je voudrais voir dans le premier 1,2,3,4,5,6 et dans le deuxieme 7,8 (1,2,3,4,5,6 étant la permière ligne d'images de mes div)

26/06/2006, 15h39
SpaceFrog

la répartition entre les deux inputs se fait comment ?
27/06/2006, 09h18
PrinceMaster77

justement

Justement c'est dans ma fonction javascript que je coince pour la répartiion et pour trouver la première ligne d'image !!!

Fonction Javascript

voici ma fonction, je parviens à boucler sur le nombre de ligne de tous mes div mais les données sont toujours les memes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    function OrdrePage(NbFile){
     var array1 = new Array();
     var array2 = new Array();
 
     NbLigne = Math.ceil(NbFile / 6);
 
     for(var n=1; n<=NbLigne;n++){
      for(var i=0; i<=6;i++){
       TabImgs=document.getElementsByTagName('IMG')[i].id
       TabDivs=document.getElementsByTagName('DIV')[i].id
 
       alert(TabImgs);
 
      //array1.push(TabDivs)
      //OrdrePage = 'document.DragAndDrop.OrdrePage'+ n +'.value = array'+ n +'';
      //eval(OrdrePage);      
      } 
     }
    }

mon alert m'affiche toujours 1,7,2,8,3,9 alors que je voudrais 1,2,3,4,5,6 !! et dans mon deuxième passage j'ai toujours 1,7,2,8,3,9 alors que je voudrais 7,8,9,10