N'importe qui peut mettre des photos de vacances sur son site Web, mais seuls les créateurs de sites Web les plus cool les concevront sous forme de diaporama. Et il ne s'agit pas d'un simple diaporama avec une photo et une page HTML, mais d'un diaporama véritablement dynamique, avec chaque image téléchargée sur la même page HTML. Nous vous apprendrons à utiliser le HTML dynamique (DHTML) et les feuilles de style en cascade (CSS) pour créer votre propre diaporama personnel qui rendra vos amis, votre famille et vos collègues encore plus ennuyeux, oh non ! C'est plus impressionnant. Mais rappelez-vous ! Ce diaporama étant écrit en DHTML, il ne peut être visualisé que dans les versions de navigateur 4.0 ou supérieures.
Bien entendu, ce type de diaporama a de sérieuses utilités. C'est juste que nous n'y avons pas encore pensé.
première étape
Collectez les images que vous avez déjà sur le Web et recadrez-les à la même taille. Assurez-vous que la plage de tailles ne dépasse pas 640 x 480 pixels et conservez les mêmes dimensions en pixels sur toutes les photos - cela sera visuellement choquant pour le spectateur si les photos sont de tailles différentes.
Étape 2
Dans votre balise d'en-tête, la première chose à faire est d'indiquer que vous utilisez CSS dans la balise <STYLE>. Dans la balise <STYLE>, définissez la position sur la page où vous souhaitez que la diapositive apparaisse et décidez si vous souhaitez commencer avec une image d'arrière-plan vierge ou afficher directement la première diapositive. Veuillez copier et coller le code de programme suivant dans votre page, en utilisant les coordonnées de localisation de votre choix :
<STYLE type="text/css"> <!-- .slides {position:absolute left: 25%; top:25%} --> </STYLE>
Étape 3
Ensuite, traitez immédiatement les détails du CSS ou insérez JavaScript dans la balise d'en-tête. Après var numSLides =, définissez le nombre de diapositives à afficher (n'en définissez pas trop, car chaque photo ajoutera un nombre considérable de Ko à la page). Il y a cinq photos dans notre exemple. Voici le code du programme :
<langage SCRIPT="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
Étape 4
Si vous souhaitez ajouter un texte d'explication pour l'image, vous pouvez utiliser le code de programme suivant pour remplacer notre texte de description par votre propre texte de description :
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = "Entrée du Quai 39."
captionTxt[2] = "Des otaries se promènent près de la jetée."
captionTxt[3] = "Le bateau a accosté au quai."
captionTxt[4] = "Murale sous-marine de baleines."
captionTxt[5] = "Îlets ou rochers dans la mer."
}
Étape 5
Collez le code du programme affiché ici dans le fichier HTML de votre page Web, sous la description JavaScript. Étant donné que Navigator 4.0 et IE 4.0 interprètent CSS différemment, notre script utilise la détection d'objets pour déterminer le mode de rendu. Si le mode présenté est Navigateur, il peut toujours définir certains objets spécifiques afin que le code du programme IE fonctionne toujours. De plus, c'est aussi la fin de tout le code du programme, il doit donc se terminer par la balise </SCRIPT> :
fonction setUp() {
si (!document.all) {
document.all = document;
pour (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
switchSlide(1);
}
fonction switchSlide(sDir) {
newSlide = currentSlide + sDir ;
si (!newSlide) newSlide=numSlides ;
si (newSlide > numSlides) newSlide=1 ;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibilité="caché";
// Si vous ne voulez pas de texte de description, supprimez la ligne suivante :
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
</script>
Faites attention aux commentaires vers la fin du code du programme : si vous n'avez pas de description, supprimez la ligne en dessous.
Étape 6
Fermez la balise d'en-tête avec </HEAD>, puis collez le code de programme suivant dans la partie corps du fichier HTML de la page Web. Notez que le code du programme identifie chaque image avec une balise <DIV> distincte, associée au format <IMG src> standard :
<BODY onLoad="setUp()">
<B> Diaporama Builder.com !</B>
<DIV id="image5" class="slides"><IMG src="cinquième.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
Étape 7
Votre public doit cliquer sur les diapositives à son propre rythme, vous devez donc lui fournir un élément sur lequel cliquer. . Vous pouvez utiliser d'anciens liens hypertextes simples, mais c'est beaucoup plus sophistiqué avec des boutons de clic spéciaux GIF Précédent et Suivant. L'exemple de code de programme utilise une table pour connecter next.gif et previous.gif :
<DIV style="position:absolute; haut:350px; gauche: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 vous ne souhaitez pas utiliser de fichiers GIF pour les boutons de clic Précédent et Suivant, remplacez les balises <IMG> ci-dessus par du texte.
Étape 8
Enfin, saisissez le texte de description à afficher dans <TEXTAREA>. Vous pouvez décider de la taille de <TEXTAREA> à votre guise, changez simplement les nombres rows= et cols=. Voici le code du programme :
<DIV id="captions" style="position:absolute; gauche: 320px; haut:75px">
<B>Légende de l'image</B>
<NOM DU FORMULAIRE=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>