• Bannato User Attivo

    [Risolto] Come far visualizzare la foto del link cliccato

    Il problema era comunque che sto facendo una pagina html/css di un elenco di persone, in cui in alto vi è la foto e sotto c'è l'elenco.
    Io vorrei che al cliccare del nome dell'elenco, il browser mi riporti in alto (con l'ancora) e mi visualizzi la foto della persona.
    Lo spazio per l'immagine è uno solo e le foto sono una cinquantina.
    Come faccio quindi a far comparire in quello spazio la foto del nome su cui clicco?
    Grazie


  • Super User

    Ciao 🙂

    Prova ad utilizzare i codici indicati in questa pagina

    :ciauz:


  • Bannato User Attivo

    @claudioweb said:

    Ciao 🙂

    Prova ad utilizzare i codici indicati in questa pagina

    :ciauz:

    Interessante!
    Però se non sbaglio fa lo slide show per un solo link, invece a me serve che lo faccia quando clicco su link diversi...!


  • Super User

    Si era solo uno spunto, in realtà nel tuo caso è molto più semplice:

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Esempio di Claudioweb</title>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    function MostraImmagine(ImmagineDaMostrare,UrlImmagine)
    {
       document.getElementById(ImmagineDaMostrare).src = UrlImmagine;
    }
    //]]>
    </script>
    </head>
    <body>
    <a name="top" id="top"></a>
    <p><img border="1" src="http://www.cryer.co.uk/resources/javascript/emily01.jpg" width="200" height="200" id="ImmagineDaMostrare"> </p>
    <br />
    <p><a href="#top"
      onclick="MostraImmagine('ImmagineDaMostrare','http://www.cryer.co.uk/resources/javascript/emily02.jpg')"> Foto 2</a></p>
    <p><a href="#top"
      onclick="MostraImmagine('ImmagineDaMostrare','http://www.cryer.co.uk/resources/javascript/emily03.jpg')"> Foto 3</a></p>
    <p><a href="#top"
      onclick="MostraImmagine('ImmagineDaMostrare','http://www.cryer.co.uk/resources/javascript/emily04.jpg')"> Foto 4</a></p>
    </body>
    </html>
    
    
    ```Ciao :ciauz:
    
    P.S. aggiungo che basta ovviamente cambiare l'url dell'immagine nel link.

  • Bannato User Attivo

    @claudioweb said:

    Si era solo uno spunto, in realtà nel tuo caso è molto più semplice:
    P.S. aggiungo che basta ovviamente cambiare l'url dell'immagine nel link.

    Intanto grazie, però non funziona, ne con firefox ne con explorer.
    Ho provato a concentrare le istruzioni nel link tirando via la parte nell'head, e funziona ma solo con firefox:

    [HTML]
    <a href="#" onclick="document.getElementById('foto').src = 'foto/1.jpg'">foto1</a>[/HTML]


  • Super User

    Mi pare strano.
    Non ho ricontrollato il codice prima di postarlo, ma l'ho scritto al volo e ho visto proprio se mi funzionava (mi funziona ancora) con IE7, FF2 e Opera9.
    Prova a fare un copia e incolla e vedere se va esattamente così com'è, senza effettuare nessuna modifica nemmeno alle url delle immagini.

    Ti posto un'alternativa fatta al volo con Dreamwever

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms*;
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers*.document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a*))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body><a name="top" id="top"></a>
    <p><img border="1" src="http://www.cryer.co.uk/resources/javascript/emily01.jpg" width="200" height="200" id="ImmagineDaMostrare" name="ImmagineDaMostrare"> </p>
    <p><a href="#top" onclick="MM_swapImage('ImmagineDaMostrare','','http://www.cryer.co.uk/resources/javascript/emily02.jpg',0)">Foto 2</a></p>
    <p><a href="#top" onclick="MM_swapImage('ImmagineDaMostrare','','http://www.cryer.co.uk/resources/javascript/emily03.jpg',0)">Foto 2</a></p>
    <p><a href="#top" onclick="MM_swapImage('ImmagineDaMostrare','','http://www.cryer.co.uk/resources/javascript/emily04.jpg',0)">Foto 2</a></p>
    </body>
    </html>
    

    Anche questa testata e funzionante.

    :ciauz:


  • Bannato User Attivo

    @claudioweb said:

    Mi pare strano

    Guarda, sono riuscito a farlo funzionare.
    Credo che l'intoppo fosse che nell'id dell'immagine vi era un nome fatto di due parole con un trattino in mezzo.
    Ti risulta?
    Comunque va tutto ora, grazie mille.


  • Super User

    @ghisirds said:

    Credo che l'intoppo fosse che nell'id dell'immagine vi era un nome fatto di due parole con un trattino in mezzo.
    Ti risulta?
    Eh ma l'id non valido penso ce l'avessi messo tu 😛

    Comunque riporto dal sito del W3C:

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").Ovviamente l'attributo ID con lo stesso nome deve essere unico in tutto il documento. Altrimenti si crea conflitto.

    Sposto nella sezione javascript.

    :ciauz: