Inserire le variabili di un array di immagini in un div con il DOM

**cavaliere123** · 27-09-2012, 02:04

Salve e anticipando che le ho provate tutte.... non ci riesco
Chiedo gentilmente il vostro aiuto.... posto lo script semplificato cosi vi diventa più facile...

codice:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">

  function grande(img) {
                var n = document.getElementsByTagName('img').length;           
                var elemento = document.getElementById(img);
                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 596 + "px";
                        elemento.style.height = 435 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="none";
                    }
                }                
            }            
            function piccola(img) {
                var n = document.getElementsByTagName('img').length; 
                var elemento = document.getElementById(img);
                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 149 + "px";
                        elemento.style.height = 109 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="inline";
                    }
                }
            }
        </script>
        <style type="text/css">
            img {
                width:149px;
                height:109px;
                margin: 0 15px;
                }            }
        </style>
    </head>
    <body> 
        <div>
            [img]dickinson.jpg[/img]
            [img]newton.jpg[/img]
            [img]Schopenhauer.jpg[/img]
        </div>

     </body>
</html>

e questo è il file di partenza, io adesso desidero creare per le immagini il solito array da poter poi portare in un file js esterno e ho tentato di fare cosi ma non funziona ....

codice:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
      <script type="text/javascript">
             
            var immag = new array()

           immag[1]= "dickinson.jpg";
           immag[2]= "newton.jpg";
           immag[3]= "Schopenhauer.jpg";



                  
                      function prendi () {
                         

                   for (var k = 1; k <immag.length+1; k++) {

                               var contn = [img]+immag[k]+[/img]

                         document.getElementById('immag').innerHTML = contn }
                                        }
                                                   prendi()


 function grande(img) {
                var n = document.getElementsByTagName('img').length;           
                var elemento = document.getElementById(img);
                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 596 + "px";
                        elemento.style.height = 435 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="none";
                    }
                }                
            }            
            function piccola(img) {
                var n = document.getElementsByTagName('img').length; 
                var elemento = document.getElementById(img);
                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 149 + "px";
                        elemento.style.height = 109 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="inline";
                    }
                }
            }
        </script>
        <style type="text/css">
            img {
                width:149px;
                height:109px;
                margin: 0 15px;
                }            }
        </style>
    </head>
    <body> 
        <div>
   <p id="immag"> </p>
<p id="immag"> </p>
<p id="immag"> </p>
        </div>

     </body>
</html>

Ho chiaramente il dubbio sia della sintassi sia del id="immag" dovunque.... mi aiutate per cortesia...
Grazie anticipato. Domenico

**cavaliere123** · 27-09-2012, 02:57

Ho escorgitato anche questa soluzione ma neanche va...

codice:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

       
      <script type="text/javascript">

             
            var immag = new array()

           immag[1]= "dickinson.jpg";
           immag[2]= "newton.jpg";
           immag[3]= "Schopenhauer.jpg";
 
                  
                      function prendi() {
                         var t = document.getElementsByTagName('fot').length;   

           for(var i = 1; i <= t; i++) { if("fot" + i != "fot"+ 0) {
                    
                     

                               var contn = [img]+immag[i]+[/img]

                         document.getElementById('immag').innerHTML = contn } }
                                             }
                                                   prendi()

        </script>

        <style type="text/css">
            img {
                width:149px;
                height:109px;
                margin: 10px 15px;
                }           

                    .area { width:140px; margin: 0px 17px; text-align :center; align=center}
                     .area1 { width:595px; margin: 0px 17px; text-align :center; align=center}
            
        </style>
    </head>
    <body>

<table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr> 
       
             <td align="center"><div id="fot1";><p id="immag"> </p></div></td>
             <td align="center"><div id="fot2";><p id="immag"> </p></div></td>  
             <td align="center"><div id="fot3";><p id="immag"> </p></div></td>
       
     </tr> </table>


     </body>
         </html>

Provate per cortesia ad aiutarmi su quest'ultimo script...

**cavaliere123** · 27-09-2012, 11:03

Buongiorno, ok lo posto ancora più semplice lo script cosi non vi rompo le scatole per solo interpretarlo...
( so di essere casinista ... )

codice:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        
      <script type="text/javascript">

             
            var immag = new array()

           immag[1]= 'dickinson.jpg';
           immag[2]= 'newton.jpg';
           immag[3]= 'Schopenhauer.jpg';



                  
                      function prendi() {
                         var t = document.getElementsByTagName('fot').length; 
                        var elemento = document.getElementById(fot);  

           for(var i = 1; i <= 12; i++) { if("fot" + i != "fot" + 0) { 
                    
                                  prov = immag[i];

                               var contn = '[img]'+ prov +'[/img]';

                          }  document.getElementById('immaga').innerHTML = '[img]'+ prov +'[/img]'; }
                                                                
                              
                                        }
                    
                               prendi()
             
                       </script>
                    </head>
                        
                               
     <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr> 
       
             <td align="center"; id="fot1"><p id="immaga"></p></td>
             <td align="center"; id="fot2"><p id="immaga"></p></td>  
             <td align="center"; id="fot3"><p id="immaga"></p></td>
       
     </tr>
                   </table>

                   <body>
                                    
           <script type="text/javascript">
           prendi();
            
                      </script>
                        
                   </body>
           </html>

perchè non mi escono le foto ????? (
Per favore ....

**Vindav** · 27-09-2012, 11:47

controlla la console degli errori, ce ne sono un sacco...

**cavaliere123** · 27-09-2012, 12:09

Per vera cortesia me lo correggi... te ne prego... ma non riesco....

**Vindav** · 27-09-2012, 12:53

partendo dal codice che hai postato per primo(quello con meno errori):

codice:

<body> 
        <div id="container">
         </div>
</body>

immag = [];
immag[0]= "dickinson.jpg";
immag[1]= "newton.jpg";
immag[2]= "Schopenhauer.jpg";
contn = "";
for (var k = 0; k <immag.length; k++) {
  contn += '[img]'+immag[k]+'[/img]';
}
document.getElementById('container').innerHTML = contn;

**cavaliere123** · 27-09-2012, 13:32

Ok e va benissimo e ti ringrazio davvero per il tuo aiuto....

ma desidero se vuoi farti vedere questa mia prova.... c'è qualcoa che mi sfugge , o sto impazzendo o mi sono rincretinito...

codice:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

          <script type="text/javascript">
            
            var immag = new array()

           immag[1]= "dickinson.jpg";
           immag[2]= "newton.jpg";
           immag[3]= "Schopenhauer.jpg";
                  
                      function prendi() {  
                      
                    //  imposto per prova la varibile uguale ad uno
                                        var i = 1
                                 contn = "";
                                                                      
                              contn = '[img]'+immag[i]+'[/img]'; 
                                   
                      document.getElementById('immagar').innerHTML = contn;              
                              
                                         }  
                    
                               prendi();
             
                       </script>
             
                    </head>
                        <body>

               <table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">

    <tr> 
                    <td align="center"><p id="immagar";></p></td>
          </tr>     
                           <script type="text/javascript"> prendi(); </script>
                  </table>                    
                                                  </body>
           </html>

Ti preciso che desidero solo che l'id = "immagar" non sia dentro le parentesi del td, ho messo il

ma sicuramente non va bene, me l'aggiusti cosi come sta... non cambiare la procedura, altrimenti poi non comprendo io... di sicuro è mia dabbenaggine...

perdonami tale richiesta ma se non comprendo è inutile copiare e basta...

Grazie davvero... Domenico.

**cavicchiandrea** · 27-09-2012, 13:47

Originariamente inviato da cavaliere123
... perdonami tale richiesta ma se non comprendo è inutile copiare e basta...

Grazie davvero... Domenico.

Per questo ci sono le guide per i primi rudimenti per poi passare ai libri, nei casi più difficili si seguono dei corsi, il forum non può farti da tutor

**cavaliere123** · 27-09-2012, 13:52

OK, chiedo scusa e ringrazio.

Discussione: Inserire le variabili di un array di immagini in un div con il DOM

Strumenti discussione

Ricerca discussione

Visualizza

Inserire le variabili di un array di immagini in un div con il DOM

Permessi di invio