Comes from here
Ok Guys, i got this web page, and it does exactly what i want: when you make click on the buttom, the image flies from the left to the right, BUT, but, i want to make them go back clicking again!! is that possible??
Code:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Una bonita presentación</TITLE>
<STYLE TYPE="text/css">
#cargando { position: absolute; left:0px; top:0px; width:400px; height:200px; visibility: visible;
background-color:white; layer-background-color:white;}
#pegaso { position: absolute; top:10px; left:0px; visibility: visible;}
#mensaje { position: absolute; top: 50px; left: 0px; width:102px; visibility: visible;}
#unicornio { position: absolute; top: 90px; left: 0px; width:102px; visibility: visible;}
#boton { position: absolute; top: 100px; left: 180px; visibility: hidden;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var referenciaEstilo;
var capaVisible;
var navegador;
if (navigator.appName == "Netscape") {
referenciaEstilo = "";
capaVisible="show";
navegador = "Netscape"; }
else {
referenciaEstilo = "style.";
capaVisible="visible";
navegador = "Explorer"; }
function nada() {}
function referenciaCapa(nombreCapa) {
if (navegador=="Netscape")
return "document.layers['"+nombreCapa+"'].";
else
return "document.all['"+nombreCapa+"'].";
}
function referenciaPixels(pixels) {
if (navegador=="Netscape")
return parseInt(pixels);
else
return "'"+pixels+"px'";
}
var iPegaso=0,iUnicornio=0,iMensaje=0;
function ocultarCapa(nombreCapa) {
eval(referenciaCapa(nombreCapa)+referenciaEstilo+'visibility = "hidden"');
}
function mostrarCapa(nombreCapa) {
eval(referenciaCapa(nombreCapa)+referenciaEstilo+'visibility = "visible"');
}
function inicio() {
ocultarCapa("cargando");
mostrarCapa("boton");
}
function moverCapas () {
var seguir=false;
if (iPegaso!=100) {
iPegaso+=4;
eval(referenciaCapa("pegaso")+referenciaEstilo+'left ='+iPegaso);
seguir=true;
}
if (seguir) {
setTimeout("moverCapas()",1);
}
}
function moverCapas2 () {
var seguir=false;
if (iMensaje!=100) {
iMensaje+=4;
eval(referenciaCapa("mensaje")+referenciaEstilo+'left ='+iMensaje);
seguir=true;
}
if (seguir) {
setTimeout("moverCapas2()",1);
}
}
function moverCapas3 () {
var seguir=false;
if (iUnicornio!=100) {
iUnicornio+=4;
eval(referenciaCapa("unicornio")+referenciaEstilo+'left ='+iUnicornio);
seguir=true;
}
if (seguir) {
setTimeout("moverCapas3()",1);
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="inicio()">
<DIV ID="cargando">
<BR><BR><HR>
<P ALIGN=CENTER>Leyendo los gráficos, espere un poco</P>
<HR>
</DIV>
<DIV ID="pegaso">
<IMG SRC="graficos/pegaso.gif">
</DIV>
<DIV ID="mensaje">
<IMG SRC="graficos/pegaso.gif">
</DIV>
<DIV ID="unicornio">
<IMG SRC="graficos/pegaso.gif">
</DIV>
<DIV ID="boton">
<FORM>
<INPUT TYPE="button" VALUE="Púlsame" onClick="moverCapas()">
<INPUT TYPE="button" VALUE="Púlsame" onClick="moverCapas2()">
<INPUT TYPE="button" VALUE="Púlsame" onClick="moverCapas3()">
</FORM>
</DIV>
</BODY>
</HTML>
I made a function for every different buttom (remeber, i'm a newbbie, so i can make some stupis things) but i did my best! (or my worst?)
And i know that i can set up another different function to make them back changin the if (iUnicornio!=100) for if (iUnicornio!=0) but it has to be in another buttom!
.-rotate script by Mr.Max