scambiare immagini con dei pulsanti

**pacchiaegi** · 28-05-2013, 10:50

Buon giorno a tutti,
scusate se propongo un problema che appare mille volte, ma ho provato a leggere il codice di alcuni casi simili al mio e non ho cavato un ragno dal buco.

Ho un grosso problema di comprensione funzionamento del Javascript.
Devo imparare a far scorrere delle foto intorno a un soggetto premendo un pulsante.
Le foto sono 10, nominate così:P10102960 - R10.JPG;...;P10102969 - R10.JPG
Ho creato delle funzioni che dovrebbero essere attivate con un clic, e poi ho scritto ancora del codice script all'interno di una tabella(l'ho messa qui così ho sezioni distinte dove mettere i bottoni per attivare gli scorrimenti), per creare IMG SRC con il riferimento della foto caricata. La foto me la carica, ma poi non me la modifica più nemmeno quando clicco sui pulsanti. Vorrei sapere dove sbaglio ma la mia pg HTML è lunga un centinaio di righe, per cui mostro quello che ho scritto. nella tabella

<TABLE align = 'center' border = 3 >
<TR align = 'center' >
<TD></TD><TD> <INPUT TYPE = "submit" class="BOTTONESU" value = "" onClick = "scorriinalto()"></TD><TD></TD></TR>
<TR>
<TD> <INPUT TYPE = "submit" class="BOTTONESN" value = "" onClick = "scorriasinistra()"></TD>
<TD align ='center'>

<script language ="javascript">
document.write("<IMG SRC = \".\\prova1\\foto\\P" + s + " - R10.JPG\" NAME = \"IMMAGINE\"VSPACE = 20 HSPACE = 20 ALT = \"premi le frecce per roteare \">");
</script>
</TD>
<TD> <INPUT TYPE = "submit" class="BOTTONEDX" value = "" onClick = "scorriadestra()"></TD>
</TR>
<TR align = 'center' ><TD></TD><TD> <INPUT TYPE = "submit" class="BOTTONEGIU" value = "" onClick = "scorriibasso()"></TD><TD></TD></TR>
</TABLE>

vi prego aiutatemi sono disperato

**Nobody33** · 28-05-2013, 19:00

Innanzitutto ci vorrebbe un po di calma.

A parte questo, non ho capito bene il tuo problema. A questo si potrebbe ovviare postando un link alla pagina; magari carichi la pagina da qualche parte e lo fai vedere.

**pacchiaegi** · 28-05-2013, 19:57

scusa la mia pivellagine, ma per postare la pagina dovrei avere uno spazio web che non ho.

Ti scrivo il codice sotto, così vedi l'effetto e lo capisci. In ogni modo credo che il problema deve essere nell' avere creato un IMG SRC che rimane così com'è piuttosto che creare un oggetto con un ID e poi modificarlo nelle funzioni legate all'evento onClick() di ogni bottone. Sto provando, ma ho poco tempo
<HTML>
<HEAD>
<TITLE> ROTEA LA TESTA </TITLE>
<script language ="javascript">
var s=1010262;
var fotovista = 1010262;
var fotoattuale = "";
var numerofoto = 1;
//scambio le foto considerando la foto in vista, la foto precedente
function scorriasinistra()
{
fotoattuale =s;
switch (fotoattuale)
case 1010268,1010269:
{ if (fotovista<1010262)
{ numerofoto = fotoattuale + 6;}
else { numerofoto = fotoattuale - 2;};
};
break;
case 1010260:
{numerofoto= 1010267;};
break;
default:
{ numerofoto = fotoattuale - 1;};
break;

s= numerofoto;
fotovista = fotoattuale;
fotoattuale = s;
};

function scorriadestra()
{
fotoattuale =s;
switch (fotoattuale)
case 1010268,1010269:
{ if (fotovista>1010265)
{ numerofoto = fotoattuale - 6;}
else { numerofoto = fotoattuale + 2;};
};
break;
case 1010267:
{numerofoto= 1010260;};
break;
default:
{ numerofoto = fotoattuale + 1;};
break;

s=numerofoto;
fotovista = fotoattuale;
fotoattuale = s;
};

function scorriinalto()
{
fotoattuale =s;
switch (fotoattuale)
case 1010268,1010269:
{ if (fotovista<1010264)
{ numerofoto = fotoattuale + 4;}
else { numerofoto = fotoattuale - 4;};
};
break;
default:
{numerofoto= 1010268;};
break;

s= numerofoto;
fotovista = fotoattuale;
fotoattuale = s;
};

function scorriinbasso()
{
fotoattuale =s;
switch (fotoattuale)
case 1010268,1010269:
{ if (fotovista<1010264)
{ numerofoto = fotoattuale + 4;}
else { numerofoto = fotoattuale - 4;};
};
break;
default:
{numerofoto= 1010269;};
break;

s= numerofoto;
fotovista = fotoattuale;
fotoattuale = s;
};

</script>

</HEAD>

<style>
.BOTTONESU{
width: 50px;
height: 50px;
background-color: #888888;
background-image: url('.\prova1\arrowup.gif');
background-repeat: no-repeat;
background-position: center center;
cursor: hand;
}
</style>
<style>
.BOTTONESN{
width: 50px;
height: 50px;
background-color: #888888;
background-image: url('.\prova1\arrowleft.gif');
background-repeat: no-repeat;
background-position: center center;
cursor: hand;}
</style>

<style>
.BOTTONEDX{
width: 50px;
height: 50px;
background-color: #888888;
background-image: url('.\prova1\arrowright.gif');
background-repeat: no-repeat;
background-position: center center;
cursor: hand;}
</style>

<style>
.BOTTONEGIU{
width: 50px;
height: 50px;
background-color: #888888;
background-image: url('.\prova1\arrowdown.gif');
background-repeat: no-repeat;
background-position: center center;
cursor: hand;
}
<style>
.IMMAGINE{
width: 350px;
height: 350px;
background-color: #ffff00;
background-image: url('.\prova1\foto\P1010262 - R10.JPG');
background-repeat: no-repeat;
background-position: center center;
}
</style>

<BODY BGCOLOR = #FFFF00>
<TABLE WIDTH =100% bgcolor = #ff0000>
<TR >
<TD >
<H1 align ='center' > PAGINA DI PROVA</H1>
<H3> Presentazione di un documento che permetta di simulare una visita virtuale </H3>

Per creare questo documento basta usare un p&oacute di HTML, di javascript e di CSS.

Ad esempio

<FORM ACTION = "" METHOD = "post">
inserisci il soggetto:
<INPUT TYPE ="text" name = "tipo_monumento" Value = "testa">
<INPUT TYPE = "submit" VALUE = "Invio">
</FORM>
<HR>
</TD>
</TR>
</TABLE>
<TABLE >
<TR>
<TD WIDTH = 30% valign = 'top' bgcolor=#88ff00>
MONUMENTI DA VISITARE:

<LI> ANFITEATRI
<LI> ACQUEDOTTI
<LI> CASTELLI
<LI> CHIESE
<LI> CONVENTI

</TD>

<TD>
<p align = 'center'>
<TABLE align = 'center' border = 3 >
<TR align = 'center' >
<TD></TD><TD> <INPUT TYPE = "submit" class="BOTTONESU" value = "" onClick = "scorriinalto()"></TD><TD></TD></TR>
<TR>
<TD> <INPUT TYPE = "submit" class="BOTTONESN" value = "" onClick = "scorriasinistra()"></TD>
<TD align ='center'>

<script language ="javascript">
var s="1010262";
document.write("<IMG SRC = \".\\prova1\\foto\\P" + string(s) + " - R10.JPG\" NAME = \"IMMAGINE\"VSPACE = 20 HSPACE = 20 ALT = \"premi le frecce per roteare \">");
</script>
</TD>
<TD> <INPUT TYPE = "submit" class="BOTTONEDX" value = "" onClick = "scorriadestra()"></TD>
</TR>
<TR align = 'center' ><TD></TD><TD> <INPUT TYPE = "submit" class="BOTTONEGIU" value = "" onClick = "scorriibasso()"></TD><TD></TD></TR>
</TABLE>
</p>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

**Nobody33** · 28-05-2013, 20:20

scusa la mia pivellagine, ma per postare la pagina dovrei avere uno spazio web che non ho.

QUI te la puoi creare gratuitamente.

Cosi mi viene abbastanza difficile. Se hai pazienza, magari passa qualcun'altro è disposto meglio di me.

Discussione: scambiare immagini con dei pulsanti

Strumenti discussione

Ricerca discussione

Visualizza

scambiare immagini con dei pulsanti

Permessi di invio