Diaporama d'images avec liens

Commenter

Contenu du snippet

Diaporama d'images, avec lien individuel. Chaque image s'affiche en sa propre taille, dans une div centrée horizontalement et verticalement, ici non dimensionnée.
Formulaire d'arrêt et de reprise du diaporama, ainsi qu'un affichage ralenti ou accéléré.
Chaque image ayant son lien propre, il est paramétrable en popup ou même fenêtre, ou sans lien. Popup de dimension unique pour toutes.

------------

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<META NAME="GENERATOR" CONTENT="notepad">
<META NAME="Author" CONTENT="Thierry Denele"> 
<META NAME="Date" CONTENT="2006-10-24"> 
<head> 
<script type="text/javascript" language="JavaScript"> 
var info = null; 
var bBoucle = true; 
var nim = new Number(-1);
var nimurl= new Number(0);
var plv = new Number(10000);
 
function ow(theURL,larg,haut) 
    { 
larg = Math.ceil(screen.width * (larg/100)*(1024/screen.width)); 
if(larg > screen.width) {larg = Math.ceil(larg*(95/100));} 
haut = Math.ceil(screen.height * (haut/100)); 
    if (info) 
        { 
            info.close(); 
            info =    window.open(theURL,"info","scrollbars=yes,menubar=yes,resizable=yes,width="+ larg +"px,height="+ haut +"px,outerwidth="+ larg +"px,outerheight="+ haut +"px,top=5,left=5,screenX=5,screenY=5"); 
            info.focus(); 
        } 
    else    { 
            info =    window.open(theURL,"info","scrollbars=yes,menubar=yes,resizable=yes,width="+ larg +"px,height="+ haut +"px,outerwidth="+ larg +"px,outerheight="+ haut +"px,top=5,left=5,screenX=5,screenY=5"); 
            info.focus(); 
        } 
    } 
  
//--- Partie Panorama d'images ----------------------------------------------- 
var imge=new Array();
imge[0]="photo_nebuleuseducone.jpg";
imge[1]="photo_trapezedorion.jpg";
imge[2]="photo_ugc10214.jpg";
imge[3]="icomlogonew.gif";
imge[4]="photo_papillon.jpg";
imge[5]="photo_tournesol.jpg";

var imgname=new Array(); 
imgname[0]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[0]; 
imgname[1]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[1];
imgname[2]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[2];
imgname[3]="http://www.internet.com/img/"+imge[3];
imgname[4]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[4];
imgname[5]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imge[5];
  
var imgpreload=new Array(); 
    for (i=0;i<=imgname.length-1;i++) 
        { 
            imgpreload[i]=new Image(); 
            imgpreload[i].src=imgname[i]; 
        } 
  
var imgurl=new Array(); 
imgurl[0]="http://www.javascriptfr.com"; 
imgurl[1]="http://www.javascript.com"; 
imgurl[2]="http://www.allhtml.com"; 
imgurl[3]="http://www.internet.com"; 
imgurl[4]="http://www.webreference.com/js"; 
imgurl[5]="#"; 
  
var imgdest=new Array(); 
imgdest[0]="popup"; 
imgdest[1]="popup"; 
imgdest[2]="self"; 
imgdest[3]="popup"; 
imgdest[4]="popup"; 
imgdest[5]="none"; 
  
//------- arrêt
function stopvaa() 
    { 
        bBoucle = false; 
        nim=0
    } 

//------départ-----------
function runvaa(nim) 
    { 
        bBoucle = true; 
    } 
  
//------- Changement image : images[0] implique ce soit la 1ère de la page, à changer sinon-----------------
function changeImg(nim) 
    { 
        nimurl=nim; 
        document.images[0].src = imgname[nim];
    } 
<!---//------ Ouverture de la popup suite au click sur l'image -----------------> 
function runurl(nim)
	{
        nim=nimurl; 
// si le paramètre self a été entré dans les données imgdest -> remplacement document courant
        if ( imgdest[nim] == "self" ) 
            { 
                document.location.href = imgurl[nim];
		if (info) { info.close(); }
            } 
        else 
            { 
// si none on ne fait rien
                if ( imgdest[nim] == "none" ) 
                { 
                void(0); 
                } 
// sinon on ouvre en 75% de large, 65% de haut
                else
                { 
                ow(imgurl[nim],75,65);
                } 
            } 
    } 
// fonction plus vite - moins vite

function pvite(pmv) { 
if (pmv == 0) { plv = (plv + 2000); 
    alert((10-plv/1000)/2);} 
else { if (plv > 1000) 
    {plv = (plv - 2000); pmv = 1;} 
    else {void(0);} 
alert((10-plv/1000)/2); 
    } 
} 

// Initiate, en fait la fonction de rotation des images.

function initiate() 
    { 
// incrémentation du numéro d'image
        nim++;
        if (nim>imgname.length-1) 
            { 
            nim=0;
            } 
        if (bBoucle) 
            { 
// commande de changement d'image 
           changeImg(nim); 
            } 
        if (bBoucle) 
            { 
// relance après un certain temps
            setTimeout("initiate()",plv); 
            }
// mise à jour de l'affichage du nom
	actualise_nomimage();
    } 

function actualise_nomimage() {
document.forms[0].elements[0].value = nim + 1;
document.forms[0].elements[1].value=imge[nim];
}
</script> 
</head> 
<body onload="runvaa(1);initiate();">
<div style="font-family:'Arial', sans-serif;font-size:10px;font-weight:700;text-align:center;vertical-align:middle;">
<p><a href="#" onclick="javascript:runurl(nim);return false;">
<!-----//------ script affichage de l'image ----------------------------->
<script type="text/javascript" language="JavaScript"> 
document.write("<img src='http://perso.wanadoo.fr/astroweb2000/fondecran/img/"+imgname[0]+"' style='border:0px;' alt='Cliquez ici...'></a>");
</script>
</p>
<!--//-------------------- Ligne de commandes ------------------------------------------->
<p><a href="#" onclick="stopvaa(); return false">Arrêter le panorama</a> - <a href="#" onclick="runvaa(1);initiate();return false">Reprendre</a> - <a href="javascript://" onClick="pvite(1)">Plus vite</a> - <a href="javascript://" onClick="pvite(0)">Moins vite</a> - Cliquez sur l'image !</p>
<!----//--------------------- Formulaire pour affichage du numéro et nom de l'image ----------------------->
<form name="noms">
<p>image numéro : <input type="text" name="numero" style="width:10px;color:darkblue;font-weight:700;background-color:#DDEE00;margin-right:10px;">
  Nom : <input type="text" name="nomimage" style="width:200px;color:darkblue;font-weight:700;background-color:#DDEE00;">
</p>
</form>
</div>
</body> 
</html>

Conclusion :


J'ai repris ici les images déjà mises dans le script images en background de perso.astroweb2000 (toujours merci à lui). On retrouve également le script que j'ai déjà mis dans Manipulation de 4 fenêtres popup : ow0 qui ouvre des popup avec ow0(url,x,y)
x et y étant les pourcentages d'écran en largeur et hauteur.
Donc dans les var imgwidth et imgheight, ce sont ces pourcentages qu'il faut mettre.
Dans imgdest, popup ouvre en popup, self dans la même fenêtre et none ne fait pas de lien (on s'en douterait).
Vous pouvez visiter les liens insérés, javascript ou pour webmasters e-business.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Deny)