Javascript per visualizzare immagini al click [era: Codice Javascript]

Mi serve un codice Javascript per ottenere il seguente risultato: far apparire per esempio sulla dx un' immagine diversa a seconda della parola che viene cliccata nell'elenco di sx.
Mi spiego meglio. Ho a sx una colonna di parole

gatto
cane
luna
sole
...

e cliccandoci sopra vorrei che a dx comparisse la relativa immagine nella stessa pagina.
Conoscete il Codice?

Grazie

Di sistemi per cambiare immagine al clic ce ne sono diversi. Ti scrivo al volo il più "antico" (che attualmente puoi considerare quello compatibile con tutti i browser del mondo) e che allo stesso tempo è il più intuitivo anche per chi non conosce il javascript.

 <div onclick="document.images['pippo'].src='path/gatto.jpg'">gatto</div>
  <div onclick="document.images['pippo'].src='path/cane.jpg'">cane</div>
  
  <img src="'path/immagine_default.gif" name="pippo" />

Se ne comprendi la semplice logica, poi sarà altrettanto semplice ridurlo di dimensioni passando gli argomenti "cane.jpg", "gatto.jpg" a una funzioncina che eviterà di farti scrivere ogni volta "document.images['pippo'].src".

P.S. Il div può essere qualsiasi tag.

[habbocontinental]

E se voglio sostituire il bottone che esce con quello che ho cliccato per farlo uscire come devo fare?

[karl94]

E se voglio sostituire il bottone che esce con quello che ho cliccato per farlo uscire come devo fare?

Non capisco, potresti spiegarti meglio?

Ho inserito nella mia pagina un codice Javascript per creare una sorta collegamento ipertestuale interno alla stessa pagina, che dovrebbe aprirmi affianco a delle voci la relativa immagine associata.
Funziona.
Solo che cliccando sulla voce la pagina mi si aggiorna dal top, e ogni volta devo scrollare per trovare il punto di prima.

[karl94]

Ho inserito nella mia pagina un codice Javascript per creare una sorta collegamento ipertestuale interno alla stessa pagina, che dovrebbe aprirmi affianco a delle voci la relativa immagine associata.
Funziona.
Solo che cliccando sulla voce la pagina mi si aggiorna dal top, e ogni volta devo scrollare per trovare il punto di prima.

Non aprire una nuova discussione, continuiamo nell'altra.
Qual'è il codice esatto che hai inserito? Puoi indicare una pagina d'esempio?

[alemoppo]

e ogni volta devo scrollare per trovare il punto di prima.

Puoi usare le ancore in HTML.

Ad esempio, se inserisci:

<a name='ciao'>parola o testo o altro</a>

Se richiami la pagina (sia riferimento assoluto che relativo) scrivendo dopo #ciao, la pagina ti "scrollerà" automaticamente alla posizione di dove è l'ancora...

Ciao!

@Karl94

{Ah, va bene. Sorry.}

Un codice di questo tipo:

<a href="#" onClick="modifyimage('dynloadarea2', 0)">image1</a>
<a href="#" onClick="modifyimage('dynloadarea2', 1)">image2</a>
<a href="#" onClick="modifyimage('dynloadarea2', 2)">image3</a>
<!--E via discorrendo.. (sono 6)-->

<div id="dynloadarea2" style="width:250px;height:357px"></div>

Questa è la seconda parte, la prima è questa:

<script type="text/javascript">
<!-- 
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* Visit [url]http://www.dynamicDrive.com[/url] for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
// prelevato ed illustrato su [url]http://www.web-link.it[/url]

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["img1.jpg", ""]
dynimages[1]=["img2.jpg", ""]
dynimages[2]=["img3.jpg", ""]
dynimages[3]=["img4.jpg", ""]
dynimages[4]=["img5.jpg", ""]
dynimages[5]=["img6.jpg", ""]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=2

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='<\/a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
// end  -->
</script>

_______________________
Cliccando sulla scritta image1 a lato dovrebbe apparirmi la img1.jpg. E fin qui ok.
Solo che mi rimanda al top della pagina e io devo scorrere per arrivare al punto. Non ho capito cosa intendi con l'ancora. (@alemoppo)

EDIT
Ho capito e risolto.
Grazie lo stesso.