Accueil > > > DIAPORAMA D'IMAGES AVEC LIENS
DIAPORAMA D'IMAGES AVEC LIENS
Information sur la source
Description
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
- <!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>
-
<!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.
Historique
- 24 octobre 2006 14:18:16 :
- Dernière mise à jour :
Les images s'affichent dans leur taille.
Le numéro de l'image s'affiche en dessous, ainsi que le nom de celle-ci, nom de fichier uniquement, celui-ci ayant été séparé du nom de répertoire dans les Array.
Des explicatifs ajoutés.
Problème restant : Correct sous IE6 et Opera9, marche pas (ou plus, plutôt) sous Firefox 1.5.0.6 pour le moment.
Un message d'erreur incongru : document.images[0] has no properties, alors que les autres marchent.
Les images d'espace mises ici sont trés grandes car non redimensionnées à 40%, à la taille de l'écran.
- 24 octobre 2006 14:46:15 :
- Dernière mise à jour :
Les images s'affichent dans leur taille.
Le numéro de l'image s'affiche en dessous, ainsi que le nom de celle-ci, nom de fichier uniquement, celui-ci ayant été séparé du nom de répertoire dans les Array.
Des explicatifs ont été ajoutés.
Problème restant : Correct sous IE6 et Opera9, marche pas (ou plus, plutôt) sous Firefox 1.5.0.6 pour le moment.
Un message d'erreur incongru : document.images[0] has no properties, alors que les autres marchent.
Les images d'espace mises ici sont trés grandes car non redimensionnées à 40%, à la taille de l'écran.
Sources du même auteur
DHTML - MANIP CSSDHTML - MANIP CSS Beaucoup de façons de changer une page en manipulations dhtml et css, en inner et outer Text/HTML.
Des choses intéressantes.
Certaines peuvent paraî...
OUVERTURE POPUP À URL ALÉATOIREOUVERTURE POPUP À URL ALÉATOIRE Ouverture ici automatique au chargement de la page.
Aléatoire parmi une liste d'URL définis en Array.
Popup positionnée et dimensionnée, selon scree...
96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, P...96 SITES RÉPERTORIÉS : HTML, CSS, DHTML, JAVA, JAVASCRIPT, PHP-CGI Page où sont répertoriés 96 sites internet pour webmasters, javascript, css, dhtml, php-cgi, java et autres. En français et anglais (souvent)
+ fonct...
BROWSER SNIFFER (RENIFLEUR)BROWSER SNIFFER (RENIFLEUR) Script qui n'est pas de moi, en exemple, extrait de <http://www.webreference.com/js>, et qui donne trop d'informations et comporte trop de liens vers ...
DHTML SCROLLTOPDHTML SCROLLTOP Présentez sur écran!
Suite du scroll au top mais assez suffisemment avancée pour être mise seule.
Toujours un menu mascable/affichable par clic sur ...
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
script de telechargement d'image ? [ par benoitquintard ]
je cherche un script qui puisse faire ceci :quand je passe la sourie sur un lien de photo, je ve que une fenetre de telechargement s'ouvre, et me dema
!!! Défi !!! recherche diaporama [ par tamtamdesign ]
Bonjour,je suis nouvelle venue sur ce site (très intéressant).Voilà, je recherche un script pour mes pages album photos.Mais comme j'ai
nombre d'image pour diaporama [ par bosto ]
Bonjour,Je suis super débutant et surtout graphiste pas technicien. Ma question est peut etre tres simple mais je ne trouve pas de reponse sur le
appel de fct javascript [ par ksaillard ]
je souhaite faire un diaporama dans ma page html je fais appel à une focntion javacript qui est dans 'ejs_visionneuse_image.js' : exec_vignette(chemi
Problème avec les caractères spéciaux ! [ par Ruffneck2045 ]
Bonjour, j'ai créer un diaporama à l'aide de php & javascript et j'ai un petit problème.En cliquant sur une image du diaporama
phototeque [ par guycnoel ]
bonjour voici une page avec un code hyper simplifié qui affiche des petites photos (thumbs). quand on clique sur une de ces photos, une fen&
Chargement et redimentionnement image [ par maxinfos ]
Bonjour, je suis actuellement en train de faire une page web dans laquelle je met des photos de petites tailles et que lorsque l'on clique dessus, ouv
Redimention image [ par maxinfos ]
Bonjour, voilà, j'ai un petit soucis sur le redimentionnement d'une image en fonction de la résolution de l'écran.En fait, mon script f
ne sais pas par où commencer! [ par unpeuperdu ]
bonjour à tous, j'ai un problème que j'imagine de débutant mais je ne sais pas par où commencer pour le régler. c'est, je
diaporama en html [ par CPoPo ]
Bonjour, je cherche à créer un diaporama : quand on clic sur "image suivante", une nouvelle image se télécharge. Mias je ne trouve pas le code html à
|
Derniers Blogs
WP7 5K BELGIUM CHALLENGEWP7 5K BELGIUM CHALLENGE par junarnoalg
Microsoft Belgique a le plaisir de vous annoncer le lancement du
Challenge Windows Phone 7
. Celui-ci se déroule du 12 juillet au 30 novembre 2010 et vous donne l'opportunit...
Cliquez pour lire la suite de l'article par junarnoalg LES MONADES POUR LES NULSLES MONADES POUR LES NULS par mdufourneaudravel
Avec l'annonce de F#, je me suis intéressé de plus en plus à la programmation fonctionnelle, je suis donc rapidement tombé sur les " monades ", mais malgré la lecture de plusieurs articles, j'étais resté perméable à leur concept. C'est désormais fini, grâ...
Cliquez pour lire la suite de l'article par mdufourneaudravel [WP7] AJOUTER DES IMAGES DANS LA MEDIA LIBRARY D'UN WINDOWS PHONE 7[WP7] AJOUTER DES IMAGES DANS LA MEDIA LIBRARY D'UN WINDOWS PHONE 7 par Audrey
L'émulateur Windows Phone 7, fourni avec la version Beta des outils développeurs n'inclut aucune image dans sa bibliothèque. Pas très pratique de tester son application lorsque l'on souhaite que l'utilisateur puisse choisir une image présente dans le télé...
Cliquez pour lire la suite de l'article par Audrey VIVE LES MOCKS ET LES POCOSVIVE LES MOCKS ET LES POCOS par vLabz
J'observe régulièrement autour de moi de la confusion à propos de ces deux termes et j'aimerais juste rappeler ce qu'ils signifient. Je ne suis bien sûr pas le mieux placé pour faire une leçon mais je vais faire de mon mieux pour mettre en valeur ce q...
Cliquez pour lire la suite de l'article par vLabz [WF4] WORKFLOW AND CUSTOM ACTIVITIES - BEST PRACTICES (4/5)[WF4] WORKFLOW AND CUSTOM ACTIVITIES - BEST PRACTICES (4/5) par JeremyJeanson
Vendredi dernier Microsoft a publié le quatrième épisode des bonnes pratiques pour coder ses activités custom dans WF4 : endpoint.tv - Workflow and Custom Activities - Best Practices (Part 4) . Tout comme pour les précédents épisodes, j'ai pris le temps d...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
Crystal Report (11)CRYSTAL REPORT (11)Crystal Reports est un outil de reporting souple et puissant, vous pouvez très facilement consult... Cliquez pour télécharger Crystal Report Academy System (12.0.2.0)ACADEMY SYSTEM (12.0.2.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft iPod Vidéo Convertisseur 6 (6.0.3.0419)XILISOFT IPOD VIDéO CONVERTISSEUR 6 (6.0.3.0419)Xilisoft iPod Vidéo Convertisseur est un outil puissant de conversion d'iPod, facile à utiliser. ... Cliquez pour télécharger Xilisoft iPod Vidéo Convertisseur 6 Xilisoft iPhone Vidéo Convertisseur 6 (6.0.3.0419)XILISOFT IPHONE VIDéO CONVERTISSEUR 6 (6.0.3.0419)Xilisoft iPhone Vidéo Convertisseur est le meilleur logiciel de conversion iPhone qui peut facile... Cliquez pour télécharger Xilisoft iPhone Vidéo Convertisseur 6 Xilisoft iPad Vidéo Convertisseur 6 (6.0.3.0419)XILISOFT IPAD VIDéO CONVERTISSEUR 6 (6.0.3.0419)Il s'agit d'un logiciel polyvalent pour convertir les formats vidéo/audio populaires en formats p... Cliquez pour télécharger Xilisoft iPad Vidéo Convertisseur 6
|