vianeth pichica muñoz: 19 sept 2011

lunes, 19 de septiembre de 2011

Este ejemplo contempla un mostrador de diapositivas (en este caso imágenes). Se tienen dos enlaces, uno mostrar la diapositiva siguiente y otro para mostrar la diapositiva anterior. Una posible aplicación práctica podría ser en una galería de fotos.

<html>
<head>
<title>Ejemplo de un mostrador de diapositivas</title>
<script>
var contador = 0;
var diapositivas = [];
function inicio()
{
        var contenedor = document.getElementById("diapositivas");
        while (contenedor.childNodes.length > 0)
        {
             if (contenedor.getElementsByTagName("img")[0]==contenedor.firstChild)
             {
                 diapositivas[diapositivas.length] = contenedor.removeChild( contenedor .firstChild);
            }
            else contenedor.removeChild(contenedor.firstChild);
        }
}
function adelante()
{
        contador++;
        if (contador >= diapositivas.length) contador = 0;
        ponerImagen()
}
function atras()
{
        contador--;
        if (contador < 0 ) contador = diapositivas.length - 1;
        ponerImagen();
}
function ponerImagen()
{
        var contenedor = document.getElementById("diapositivas");
        if (contenedor.childNodes.length==0)
        contenedor.appendChild(diapositivas[contador]);
        else contenedor.replaceChild(diapositivas[contador], contenedor.childNodes[0]);
}
</script>
</head>
<body>
<a href="javascript: atras();">Atrás</a>
<span id="diapositivas">
<img src="arx1299975097t.gif" alt="Diapositiva 1" height="100" width="200">
<img src="bwy1296591260p.gif" alt="Diapositiva 2" height="100" width="200">
<img src="images.jpg" alt="Diapositiva 3" height="100" width="200">
</span>
<a href="javascript: adelante();">Adelante </a>
</body>
</html>
<script>
inicio();
ponerImagen();
</script>

Se muestra una versión simplificada del problema limitada tan sólo al lado del cliente. Para ello es necesario imaginarse un sistema en línea donde se suben ficheros al servidor, ejemplo de ello podría ser una aplicación de correo electrónico.

<html>
<head>
<title> ejemplo para adjuntar multiplies ficheros </title>
<script language="javascript" type="text/javascript">
function nuevofichero()
{
    var input = document.getElementsByTagName("input")[0];
    var nuevoInput = input.cloneNode(true);
    input.parentNode.appendChild(nuevoInput);
}
</script>
</head>
<body>
<form name="ejemplos de ficheros" method="post" enctype="multipart/form-data">
<fieldset><legend>adjuntar multiples de ficheros</legend>
<input name="ficheros[]" type="file"size="60"></fieldset>
<a href="javascript: nuevoFichero();">Adjuntar otro fichero</a>
<input name="Subir" type="submit" value="Adjuntar">
</form>
</body>
</html>