[Risolto] Come far visualizzare la foto del link cliccato

ghisirds

[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

claudioweb

Ciao

Prova ad utilizzare i codici indicati in questa pagina

ghisirds

@claudioweb said:

Ciao

Prova ad utilizzare i codici indicati in questa pagina

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...!

claudioweb

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.

ghisirds

@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]

claudioweb

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.

ghisirds

@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.

claudioweb

@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.