Ayuda para mostrar galería de fotos y datos en una página web utilizando Javascript
Estoy desarrollando una web, pero me trabe en la seccion de galeria de fotos y datos de amigos.
El caso es que copie un ejemplo en javascript para visualizar graficos con botones (<Back,Next>).
Con lo poco que aprendi de javascript trate de ajustarlo a lo que necesitaba pero no funciono. Los Graficos funcionan bien, pero las cajas de texto no se actualizan al pinchar los botones BACK y NEXT.
Para mejor comprension les envio el codigo a ver si me ayudan es este problema:
<HTML>
<HEAD><TITLE> Amigos </TITLE></HEAD>
<BODY>
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="foto01.jpg" width="360" height="240" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
Nombre : <INPUT TYPE="text" NAME="t1" SIZE="40" VALUE="nombre1"><BR>
Edad : <INPUT TYPE="text" NAME="t2" SIZE="05" VALUE=1><BR>
Residencia: <INPUT TYPE="text" NAME="t3" SIZE="40" VALUE="pais1"><BR>
<div align="center"><center><p>
<!--webbot bot="HTMLMarkup" startspan -->
<script language="JavaScript1.1">
var photos= new Array()
var edad = new Array()
var nombre= new Array()
var pais = new Array()
var which = 0
/*Cambie abajo las variables para referirse a sus propios valores*/
photos[0]= "foto01.jpg"
photos[1]= "foto02.jpg"
photos[2]= "foto03.jpg"
photos[3]= "foto04.jpg"
nombre[0]= "nombre1";
nombre[1]= "nombre2";
nombre[2]= "nombre3";
nombre[3]= "nombre4";
edad[0] = 1;
edad[1] = 2;
edad[2] = 3;
edad[3] = 4;
pais[0] = "pais1";
pais[1] = "pais2";
pais[2] = "pais3";
pais[3] = "pais4";
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
document.write.rotater.t1.value= nombre[which]
document.write.rotater.t2.value= edad[which]
document.write.rotater.t3.value= pais[which]
}
else window.status='Inicio de Galeria'
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
document.write.name.t1.value= nombre[which]
document.write.edad.t2.value= edad[which]
document.write.resi.t3.value= pais[which]
}
else window.status='Fin de Galeria'
}
</script>
<!--webbot bot="HTMLMarkup" endspan -->
<input type="button" value="<<Back" name="B2" onClick="backward()">
<input type="button" value="Next>>" name="B1" onClick="forward()"><br>
</p>
</center></div>
</form>
</td>
</tr>
</table>
</BODY>
</HTML>
De antemano gracias
El caso es que copie un ejemplo en javascript para visualizar graficos con botones (<Back,Next>).
Con lo poco que aprendi de javascript trate de ajustarlo a lo que necesitaba pero no funciono. Los Graficos funcionan bien, pero las cajas de texto no se actualizan al pinchar los botones BACK y NEXT.
Para mejor comprension les envio el codigo a ver si me ayudan es este problema:
<HTML>
<HEAD><TITLE> Amigos </TITLE></HEAD>
<BODY>
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="foto01.jpg" width="360" height="240" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
Nombre : <INPUT TYPE="text" NAME="t1" SIZE="40" VALUE="nombre1"><BR>
Edad : <INPUT TYPE="text" NAME="t2" SIZE="05" VALUE=1><BR>
Residencia: <INPUT TYPE="text" NAME="t3" SIZE="40" VALUE="pais1"><BR>
<div align="center"><center><p>
<!--webbot bot="HTMLMarkup" startspan -->
<script language="JavaScript1.1">
var photos= new Array()
var edad = new Array()
var nombre= new Array()
var pais = new Array()
var which = 0
/*Cambie abajo las variables para referirse a sus propios valores*/
photos[0]= "foto01.jpg"
photos[1]= "foto02.jpg"
photos[2]= "foto03.jpg"
photos[3]= "foto04.jpg"
nombre[0]= "nombre1";
nombre[1]= "nombre2";
nombre[2]= "nombre3";
nombre[3]= "nombre4";
edad[0] = 1;
edad[1] = 2;
edad[2] = 3;
edad[3] = 4;
pais[0] = "pais1";
pais[1] = "pais2";
pais[2] = "pais3";
pais[3] = "pais4";
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
document.write.rotater.t1.value= nombre[which]
document.write.rotater.t2.value= edad[which]
document.write.rotater.t3.value= pais[which]
}
else window.status='Inicio de Galeria'
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
document.write.name.t1.value= nombre[which]
document.write.edad.t2.value= edad[which]
document.write.resi.t3.value= pais[which]
}
else window.status='Fin de Galeria'
}
</script>
<!--webbot bot="HTMLMarkup" endspan -->
<input type="button" value="<<Back" name="B2" onClick="backward()">
<input type="button" value="Next>>" name="B1" onClick="forward()"><br>
</p>
</center></div>
</form>
</td>
</tr>
</table>
</BODY>
</HTML>
De antemano gracias
1 respuesta
Respuesta de mcalons
1
Hice algún retoque a parte de lo de los textos, ahora te carga una imagen de inicio diferente al resto que tienes en el array que bien puede ser el logo tuyo o de la empresa a quien lo destines.
Saludos y sigue aprendiendo
-------------------------
<HTML>
<HEAD>
<TITLE> Amigos </TITLE>
</HEAD> <BODY>
<table border="0" cellpadding="0">
<tr>
<td width="100%"> <img src="FADE/imagefader/images/logo.gif" width="360" height="240" name="photoslider">
</td>
</tr>
<tr>
<td width="100%"> <form method="POST" name="rotater"> Nombre : <INPUT TYPE="text" NAME="t1" SIZE="40" VALUE="description1"><BR> Edad :
<INPUT TYPE="text" NAME="t2" SIZE="05" VALUE=1><BR> Residencia: <INPUT TYPE="text" NAME="t3" SIZE="40" VALUE="pais1"><BR> <div
align="center"><center><p>
<script language="JavaScript1.1">
<!--
var photos= new Array()
var edad = new Array() ;var nombre= new Array() ;
var pais = new Array();
var which = 0 ;
/*Cambie abajo las variables para referirse a sus propios valores*/
photos[0]= "FADE/imagefader/images/description1.gif";
photos[1]= "FADE/imagefader/images/description2.gif";
photos[2]= "FADE/imagefader/images/description3.gif";
photos[3]= "FADE/imagefader/images/description4.gif";
nombre[0]= "description1";
nombre[1]= "description2";
nombre[2]= "description3";
nombre[3]= "description4";
edad[0] = 1;
edad[1] = 2;
edad[2] = 3;
edad[3] = 4;
pais[0] = "pais1";
pais[1] = "pais2";
pais[2] = "pais3";
pais[3] = "pais4";
function backward(){
if (which>0){
window.status= which-- ;
document.images.photoslider.src=photos[which];
document.rotater.t1.value= nombre[which];
document.rotater.t2.value= edad[which] ;
document.rotater.t3.value= pais[which] ;
}else {
document.images.photoslider.src="FADE/imagefader/images/logo.gif";
window.status='Inicio de Galeria';
}
}
function forward(){
if (which<photos.length-1){
window.status= 2 + which++ ;
document.images.photoslider.src=photos[which] ;
document.rotater.t1.value= nombre[which] ;
document.rotater.t2.value= edad[which] ;
document.rotater.t3.value= pais[which]
}else{
window.status='Fin de Galeria';
}
}
//-->
</script>
<input type="button" value="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br> </p></center></div> </form> </td> </tr> </table> </BODY> </HTML>
-------------------------
McAlons Multimedia Design
-------------------------
Muy pronto URL personal.
En construccion Tienda Virtual standard para su comercializacion para webmaster, pequeñas y medianas empresas que deseen realizar negocio en internet.
Puedes ver como se está construyendo en http://www24.brinkster.com/mcalons/mmd/shop/default.asp
Si estas interesado en la misma, enviame un mail a [email protected]
Saludos y sigue aprendiendo
-------------------------
<HTML>
<HEAD>
<TITLE> Amigos </TITLE>
</HEAD> <BODY>
<table border="0" cellpadding="0">
<tr>
<td width="100%"> <img src="FADE/imagefader/images/logo.gif" width="360" height="240" name="photoslider">
</td>
</tr>
<tr>
<td width="100%"> <form method="POST" name="rotater"> Nombre : <INPUT TYPE="text" NAME="t1" SIZE="40" VALUE="description1"><BR> Edad :
<INPUT TYPE="text" NAME="t2" SIZE="05" VALUE=1><BR> Residencia: <INPUT TYPE="text" NAME="t3" SIZE="40" VALUE="pais1"><BR> <div
align="center"><center><p>
<script language="JavaScript1.1">
<!--
var photos= new Array()
var edad = new Array() ;var nombre= new Array() ;
var pais = new Array();
var which = 0 ;
/*Cambie abajo las variables para referirse a sus propios valores*/
photos[0]= "FADE/imagefader/images/description1.gif";
photos[1]= "FADE/imagefader/images/description2.gif";
photos[2]= "FADE/imagefader/images/description3.gif";
photos[3]= "FADE/imagefader/images/description4.gif";
nombre[0]= "description1";
nombre[1]= "description2";
nombre[2]= "description3";
nombre[3]= "description4";
edad[0] = 1;
edad[1] = 2;
edad[2] = 3;
edad[3] = 4;
pais[0] = "pais1";
pais[1] = "pais2";
pais[2] = "pais3";
pais[3] = "pais4";
function backward(){
if (which>0){
window.status= which-- ;
document.images.photoslider.src=photos[which];
document.rotater.t1.value= nombre[which];
document.rotater.t2.value= edad[which] ;
document.rotater.t3.value= pais[which] ;
}else {
document.images.photoslider.src="FADE/imagefader/images/logo.gif";
window.status='Inicio de Galeria';
}
}
function forward(){
if (which<photos.length-1){
window.status= 2 + which++ ;
document.images.photoslider.src=photos[which] ;
document.rotater.t1.value= nombre[which] ;
document.rotater.t2.value= edad[which] ;
document.rotater.t3.value= pais[which]
}else{
window.status='Fin de Galeria';
}
}
//-->
</script>
<input type="button" value="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br> </p></center></div> </form> </td> </tr> </table> </BODY> </HTML>
-------------------------
McAlons Multimedia Design
-------------------------
Muy pronto URL personal.
En construccion Tienda Virtual standard para su comercializacion para webmaster, pequeñas y medianas empresas que deseen realizar negocio en internet.
Puedes ver como se está construyendo en http://www24.brinkster.com/mcalons/mmd/shop/default.asp
Si estas interesado en la misma, enviame un mail a [email protected]
