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.
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".Codice:<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" />
P.S. Il div può essere qualsiasi tag.
E se voglio sostituire il bottone che esce con quello che ho cliccato per farlo uscire come devo fare?
Non capisco, potresti spiegarti meglio?Citazione:
Originalmente inviato da habbocontinental
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.Citazione:
Originalmente inviato da langolodiastrava
Qual'è il codice esatto che hai inserito? Puoi indicare una pagina d'esempio?
Puoi usare le ancore in HTML.Citazione:
e ogni volta devo scrollare per trovare il punto di prima.
Ad esempio, se inserisci:
Se richiami la pagina (sia riferimento assoluto che relativo) scrivendo dopo #ciao, la pagina ti "scrollerà" automaticamente alla posizione di dove è l'ancora...Codice HTML:<a name='ciao'>parola o testo o altro</a>
Ciao!
@Karl94
{Ah, va bene. Sorry.}
Un codice di questo tipo:
Questa è la seconda parte, la prima è questa:Codice HTML:<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>
_______________________Codice HTML:<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.