martes, 13 de septiembre de 2011

Por medio de una tabla mostrar una imagen a la vez y cambiarla de acuerdo al checkbox utilizado.

<html>
<head>
<title>cambiar imagenes</title>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">
<!--

var imageNum = 1

image1 = new Image()
image1.src = "img/unchecked.gif"
image2 = new Image()
image2.src = "img/amistad.gif"

function cambiar(id)
{
    if ( imageNum == 1 )
    {
        document.getElementById('checkbox_'+id).src = image2.src
        imageNum = 2
    }
else
{
document.getElementById('checkbox_'+id).src = image1.src
imageNum = 1
}
}

//
</SCRIPT>
<table BORDER="5"  WIDTH="10%" ALIGN="CENTER">
<tr>
<th width="180" align="center"><a href="Javascript:cambiar('1')""><img id="checkbox_1" name="checkbox_1" src="img/unchecked.gif" width="100" height="85" border="1"></a>
<br>
<a href="Javascript:cambiar('2')""><img id="checkbox_2" name="checkbox_2" src="img/amistad.gif" width="100" height="85" border="1"></a></th>
</tr>
</table>
</body>
</html>



En una nueva página capturar un nombre y mostrarlo en la misma página concatenando con la fecha del sistema.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- PRIMER PASO: Copiar este formulario en el archivo prev1.htm -->
<form type="get" action="prev2.htm">
<div align="left"><table border="1" bgcolor="#00FFFF" cellspacing="0" cellpadding="0"
width="250">
<tr>
<td width="80"><small><font face="Arial">Nombre:</font></small></td>
<td width="170"><input type="text" name="nombre" size="14"></td>
</tr>
<tr>
<td width="80"><small><font face="Arial">Apellido:</font></small></td>
<td width="170"><input type="text" name="apellido" size="14"></td>

</tr>
<tr>
<td bgcolor="#000000" width="80"> </td>
<td bgcolor="#000000" width="170"><small><font face="Arial">
<input type="submit" value="ACCEDER"></font></small></td>
</tr>
</table>
</div>
</form>



en la segunda pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<!-- SEGUNDO PASO: Copiar este script en el archivo prev2.htm -->
<!-- Dentro de HEAD -->
<script LANGUAGE="JavaScript">
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
params = getParams();
</script>

<!-- Dentro de BODY -->
<script LANGUAGE="JavaScript">
nombre = unescape(params["nombre"]);
apellido = unescape(params["apellido"]);
email = unescape(params["email"]);
document.write("Nombre = " + nombre + "<br>");
document.write("Apellido = " + apellido + "<br>");
</script>
<script> document.write(new Date())
</script>
<body>
</body>
</html>



Ejemplo de trabajo con los métodos


 <html>
<head>
</head>
<body>
function validaSubmite()
{
    if (document.miFormulario.campo1.value == "")
       alert("Debe rellenar el formulario")
    else
       document.miFormulario.submit()
}
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="button" value="Enviar" onclick="validaSubmite()">
</form>
</body>
</html>