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
PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVASPETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVASpour cette source j'ai exploiter la balise canvas afin de crée un petit logiciel de dessin je dit petit car il lui manque pas mal de choses le désigne...
par kazma
CALCULATRICE HEURECALCULATRICE HEUREc'est un script en javascript pour afficher l'heure qui s'actualise chaque seconde
est aussi une simple calculatrice en utilisant des images
((pour...
par m22001111
DRAG & DROP VERS UN CANVASDRAG & DROP VERS UN CANVASla source comme son nom l'indique sert a faire du drag & drop d'image vers un canvas
marche avec ie9 firefox chrome safari ...
par kazma
ROTATION D'UNE IMAGE, ANIMATIONROTATION D'UNE IMAGE, ANIMATION Voici un tout petit code qui permet de faire tourner une image en animation.
Depuis quelques années, HTML5 a introduit l'élément "canvas" qui convi...
par william voirol
FRACTALES, FOUGÈRE, TRIANGLE, CARRÉFRACTALES, FOUGÈRE, TRIANGLE, CARRÉ En 1974 (environ), Benoît Mandelbrot a inventé (découvert ?) les objets fractals (ou fractales).
Ce sont ces objets qui présentent une 'même' structu...
par william voirol
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
CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|