Diaporama direction. Outils webmaster. Trucs et astuces html javascript

Outils pour webmaster . Trucs et astuces en code HTML, JavaScript, PHP : améliorer son site internet

Descriptif : ce diaporama vous permet de naviguer manuellement ou automatiquement parmi les images que vous pouvez commenter. Comme il n'y a pas de pré-chargement d'images, cet outil est à préférer au diaporama a fondu enchaîné qui n'autorise que quelques vues sous peine de voir le temps de chargement s'éterniser.

Mise en oeuvre : Sélectionnez et copiez directement à l'écran le code ci-dessous et collez-le dans votre page, code HTML visible.

<script
LANGUAGE="JavaScript">
var current = 0;

function next(){ // forward one image
if(document.formname.slide[current+1]){
document.images.show.src = document.formname.slide[current+1].value;
document.formname.slide.selectedIndex = ++current;}
else{first();}}

function previous(){ // back on image
if((current-1) >= 0){
document.images.show.src = document.formname.slide[current-1].value;
document.formname.slide.selectedIndex= --current;}
else{last();}}

function first(){ // jump to first image
current=0;
document.images.show.src = document.formname.slide[0].value;
document.formname.slide.selectedIndex=0;}

function last(){ // this is jump to last image
current=(document.formname.slide.length-1);
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex=current;}

function ap(text){ // this controls the auto-play and/or auto-stop
document.formname.slidebutton.value=(text == "Stop") ? "Start" : "Stop";
rotate();}

function change(){ // this is for the pulldown menu
current=document.formname.slide.selectedIndex;
document.images.show.src = document.formname.slide[current].value;}

function rotate() {
if (document.formname.slidebutton.value == "Stop") {
current = (current == document.formname.slide.length-1) ? 0 : current+1;
document.images.show.src = document.formname.slide[current].value;
document.formname.slide.selectedIndex = current;
window.setTimeout("rotate()", 5000);}}
// End --></script> </p>

<form name="formname">
<div align="center"><center><table cellspacing="1" cellpadding="4" bgcolor="#000000">
<tr>
<td align="center" bgcolor="white"><b>DIAPORAMA</b> </td>
</tr>
<tr>
<td align="center" bgcolor="white" width="200" height="150"><img
src="IMAGE_1.gif" name="show" WIDTH="170" HEIGHT="202"></td>
</tr>
<tr>
<td align="center" bgcolor="#C0C0C0"><select name="slide" onChange="change();" size="1">
<option value="IMAGE_1.gif" selected>VOTRE COMMENTAIRE 1</option>
<option value="IMAGE_2.jpg">VOTRE COMMENTAIRE 2</option>
<option value="IMAGE_3.jpg">VOTRE COMMENTAIRE 3</option>
</select> </td>
</tr>
<tr>
<td align="center" bgcolor="#C0C0C0"><input type="button" onclick="first();"
value="|<<" title="Jump to beginning" style="border:1 SOLID #e6e6e6;"> <input
type="button" onclick="previous();" value="<<" title="Last Picture"
style="border:1 SOLID #e6e6e6;"> <input type="button" name="slidebutton"
onClick="ap(this.value);" value="Start" title="AutoPlay"
style="width:75;border:1 SOLID #e6e6e6;"> <input type="button" onclick="next();"
value=">>" title="Next Picture" style="border:1 SOLID #e6e6e6;"> <input
type="button" onclick="last();" value=">>|" title="Jump to end"
style="border:1 SOLID #e6e6e6;"> </td>
</tr>
</table>
</center></div>
</form>

Remarque : lors de la vue en automatique, vous pouvez modifier la valeur à la ligne window.setTimeout("rotate()", 5000);}}. Essayez le chiffre 1000.