Cualquiera puede poner fotos de sus vacaciones en su sitio web, pero sólo los mejores creadores web las diseñarán como una presentación de diapositivas. Y no es una simple presentación de diapositivas con una foto y una página HTML, sino una presentación de diapositivas verdaderamente dinámica, con cada imagen descargada en la misma página HTML. Le enseñaremos cómo utilizar HTML dinámico (DHTML) y hojas de estilo en cascada (CSS) para crear su propia presentación de diapositivas personal que hará que sus amigos, familiares y colegas sean más aburridos, ¡oh, no! Es más impresionante. ¡Pero recuerda! Debido a que esta presentación de diapositivas está escrita en DHTML, solo se puede ver en la versión 4.0 o superior del navegador.
Por supuesto, este tipo de presentación de diapositivas tiene usos importantes. Es solo que aún no lo hemos pensado.
paso uno
Recoge las imágenes que ya tienes en la web y recórtalas al mismo tamaño. Asegúrese de que el rango de tamaño no sea superior a 640 x 480 píxeles y mantenga las mismas dimensiones en píxeles en todas las fotos; resultará visualmente discordante para el espectador si las fotos tienen diferentes tamaños.
Paso 2
En tu etiqueta de encabezado, lo primero que debes hacer es indicar que estás usando CSS en la etiqueta <STYLE>. En la etiqueta <ESTILO>, establezca la posición en la página donde desea que aparezca la diapositiva y decida si comenzar con una imagen de fondo en blanco o mostrar la primera diapositiva directamente. Corte y pegue el siguiente código de programa en su página, utilizando las coordenadas de ubicación de su elección:
<ESTILO tipo="text/css"> <!-- .slides {posición:absoluta; izquierda: 25%; arriba:25%; visibilidad:oculta} --> </ESTILO>
Paso 3
A continuación, ocúpese de los detalles de CSS inmediatamente o inserte JavaScript en la etiqueta del encabezado. Después de var numSLides =, establezca la cantidad de diapositivas que se mostrarán (no establezca demasiadas, porque cada foto agregará una cantidad considerable de KB a la página). Hay cinco fotografías en nuestro ejemplo. El siguiente es el código del programa:
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
Paso 4
Si desea agregar texto explicativo para la imagen, puede usar el siguiente código de programa para reemplazar nuestro texto de descripción con su propio texto de descripción:
var captionTxt = new Array(numSlides
function setUpCaptions() {
captionTxt[1] = "Entrada al muelle 39."
captionTxt[2] = "Los leones marinos deambulan cerca del muelle."
captionTxt[3] = "El barco atracó en el muelle."
captionTxt[4] = "Mural del mundo submarino de ballenas."
captionTxt[5] = "Islotes o rocas en el mar."
}
Paso 5
Pegue el código del programa que se muestra aquí en el archivo HTML de su página web, debajo de la descripción de JavaScript. Debido a que Navigator 4.0 e IE 4.0 interpretan CSS de manera diferente, nuestro script utiliza la detección de objetos para determinar el modo de representación. Si el modo presentado es Navegador, aún puede definir algunos objetos específicos para que el código del programa IE aún funcione. Además, este es también el final de todo el código del programa, por lo que debe terminar con la etiqueta </SCRIPT>:
configuración de función() {
si (!document.all) {
documento.todo = documento;
para (i=1;i<=numSlides;i++) document.all[("imagen"+i)].
estilo=document.all[("imagen"+i)];
}
cambiarDeslizamiento(1);
}
función cambiarDeslizamiento(sDir) {
nuevaDiapositiva = diapositivaactual + sDir;
if (!nuevaDiapositiva) nuevaDiapositiva=numDiapositivas;
if (nueva Diapositiva > num Diapositivas) nueva Diapositiva = 1;
document.all[("imagen"+newSlide)].style.visibility="visible";
document.all[("imagen"+diapositiva actual)].
estilo.visibilidad="oculto";
// Si no desea el texto descriptivo, elimine la siguiente línea:
document.all["captions"].document.forCaptions.captionsText.
valor=captionTxt[nuevadiapositiva];
diapositivaactual = nuevadiapositiva;
}
//-->
</script>
Preste atención a los comentarios cerca del final del código del programa: si no tiene una descripción, elimine la línea debajo de ella.
Paso 6
Cierre la etiqueta del encabezado con </HEAD> y luego pegue el siguiente código de programa en la parte del cuerpo del archivo HTML de la página web. Tenga en cuenta que el código del programa identifica cada imagen con una etiqueta <DIV> separada, que está asociada con el formato <IMG src> normal:
<BODY onLoad="configurar()">
<B> ¡Presentación de diapositivas de Builder.com!</B>
<DIV id="image5" class="diapositivas"><IMG src="quinto.jpg"></DIV>
<DIV id="image4" class="diapositivas"><IMG src="cuarto.jpg"></DIV>
<DIV id="image3" class="diapositivas"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="diapositivas"><IMG src="segundo.jpg"></DIV>
<DIV id="image1" class="diapositivas"><IMG src="first.jpg"></DIV>
Paso 7
Su audiencia tiene que hacer clic en las diapositivas a su propio ritmo, por lo que debe proporcionarles algo en lo que hacer clic. . Puede utilizar hipervínculos antiguos y sencillos, pero es mucho más sofisticado con botones especiales de clic en GIF Anterior y Siguiente. El código del programa de muestra utiliza una tabla para conectar el siguiente.gif y el anterior.gif:
<DIV estilo="posición:absoluta; arriba:350px; izquierda:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
Si no desea utilizar archivos GIF para los botones de clic Anterior y Siguiente, reemplace las etiquetas <IMG> de arriba con texto.
Paso 8
Finalmente, ingrese el texto de descripción que se mostrará en <TEXTAREA>. Puedes decidir el tamaño de <TEXTAREA> como quieras, simplemente cambia los números de filas= y cols=. El siguiente es el código del programa:
<DIV id="captions" style="posición:absoluta; izquierda: 320px; arriba:75px">
<B>pie de imagen</B>
<NOMBRE DEL FORMULARIO=para subtítulos>
<TEXTAREA nombre="captionsText" wrap="virtual" filas=25 cols=20"></TEXTAREA>
</FORM>
</DIV>