Accueil > Forum > > > > diaporama javascript avec un lien pour chaque image
 diaporama javascript avec un lien pour chaque image
mercredi 10 décembre 2008 à 11:04:49 |
diaporama javascript avec un lien pour chaque image
feldrik
|
Bonjour, je bute sur un problème depuis des jours, et espère trouver sur ce forum une âme charitable pour me tirer de ce mauvais pas. Je veux faire un diaporama (sous dreamweaver) placé dans une div, avec un lien pour chaque image. J'ai trouvé moults scripts, en ai testé autant, mais sans jamais parvenir au résultat escompté (oui, attention, amateur).
J'aimerais, si possible, que l'on me guide pour que je puisse conserver la base de ce diaporama sympa, tout en accolant un lien à chaque image. Celui qui me tire de ce mauvais pas aura droit à toute ma cyber-estime  !
voici le code du diaporama que je voudrais garder :
<head>
/* BOITE DU DIAPORAMA */
#boite_diapo { position:absolute;
width:205px;
height:100px;
top:0px;
left:31px;
background-color:none;
background-image:url(zi/b_rf_001_renard_polaire.jpg);} /* IL FAUT IMPERATIVEMENT QUE LE NOM DE L'IMAGE SOIT IDENTIQUE A CELUI DANS LE SCRIPT : tab_img[0]
/* image dans la boite du diaporama */
#img_diapo { width:205px;
height:100px;
filter: alpha(opacity=0); /* fondu pour internet explorer */
-moz-opacity:0; /* fondu pour mozilla, phoenix, firebird, firefox*/
opacity:0; /* fondu pour mozilla firefox */
-khtml-opacity:0.5; /* fondu pour konqueror et safari */
background-color:none;}
-->
</style>
<script language="javascript">
var imagesTodisplay = new Array;
var num=0;
imagesTodisplay[0] = "zi/b_rf_001_renard_polaire.jpg";// TOUJOURS COMMENCER PAR imagesTodisplay[0]
imagesTodisplay[1] = "zi/b_rf_002_cheval-przewalski.jpg";
imagesTodisplay[2] = "zi/b_rf_003_renne.jpg";
imagesTodisplay[3] = "zi/b_rf_004_boeuf_musque.jpg";
var tab_img = new Array; //tableau contenant les images
//numéro de l'image jouée
//Ajout d'un compte à rebours afin de jouer le diaporama
var timer_diapo=setInterval("diaporama('boite_diapo','img_diapo',500)",4000);
/* Explication des paramètres
'boite_diapo' : identifiant de la boite du diaporama. NE PAS MODIFIER
'img_diapo' : identifiant de l'image contenu dans la boite diaporama. NE PAS MODIFIER.
500 : temps (en milliseconde) de l'effet fondu entre 2 images. 1 seconde = 1000 millisecondes.
7000 : interval de temps entre 2 images. 1 seconde = 1000 millisecondes.
*/
//Fonction qui permet de jouer le diaporama
function diaporama(divid, imageid, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;
document.getElementById(divid).style.backgroundImage = "url(" + imagesTodisplay[num] + ")";
changeOpac(0, imageid);
if (num>(imagesTodisplay.length-2))
{num = -1;}
document.getElementById(imageid).style.backgroundImage = "url(" + imagesTodisplay[num+1] + ")";
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid+ "')",(timer * speed));
timer++;
}
num++;
}
//Fonction qui attribue l'opacité à l'objet "image_diapo"
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
} type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body>
<div id="boite_diapo">
<div id="img_diapo"></div>
</div>
</body>
</html>
J'attends vos réponses avec impatience,
Merci d'avance !
|
|
mercredi 10 décembre 2008 à 18:53:25 |
Re : diaporama javascript avec un lien pour chaque image
PetoleTeam
|
Bonjour,
utilises l'événement onclick sur le DIV qui contient ton image en arrière plan.
;O)
|
|
mercredi 10 décembre 2008 à 19:16:25 |
Re : diaporama javascript avec un lien pour chaque image
feldrik
|
Bonjour et merci de ta réponse. En fait, quand je place un événement onclick dans la div contenant l'image d'arrière plan, le lien n'est effectif que pour cette image d'arrière plan, quelle que soit l'image qui défile. Ce que je voudrais, c'est que chaque image qui défile ait son propre lien (image1/lien1, image2/lien2, imageetc./lienetc.), en plaçant des lignes directement dans le script. En quelque sorte, donner une propriété lien à chaque image pour que lorsque l'on clique dessus, on active ce lien.
Merci ;z)
|
|
mercredi 10 décembre 2008 à 19:39:24 |
Re : diaporama javascript avec un lien pour chaque image
PetoleTeam
|
un truc de ce style devrait pourtant faire l'affaire
var O_Div = document.getElementById(divid);
var szImage = imagesTodisplay[num];
O_Div.style.backgroundImage = "url(" + szImage + ")";
O_Div.onclick = function(){ alert( szImage)}
;O)
|
|
mercredi 10 décembre 2008 à 19:42:41 |
Re : diaporama javascript avec un lien pour chaque image
feldrik
|
Ok, je vais essayer de suite et je reviens pour dire si ça marche. Merci !
|
|
mercredi 10 décembre 2008 à 19:50:55 |
Re : diaporama javascript avec un lien pour chaque image
feldrik
|
En fait, je ne sais pas où et comment associer des url aux différents imagesTodisplay[num]
|
|
mercredi 10 décembre 2008 à 19:58:55 |
Re : diaporama javascript avec un lien pour chaque image
PetoleTeam
|
tu peux par exemple
associer un équivalent URL pour chaque imagesTodisplay[0]
var URL_ToDisplay = new Array();
var IMG_ToDisplay = new Array();
var i=0;
URL_ToDisplay[i] = "images_00.jpg";
IMG_ToDisplay[i++] = "page_00.html";
URL_ToDisplay[i] = "images_01.jpg";
IMG_ToDisplay[i++] = "page_01.html";
URL_ToDisplay[i] = "images_02.jpg";
IMG_ToDisplay[i++] = "page_02.html";
et dans la fonction plus loin tu utilises num comme index des deux tableaux.
;O)
|
|
mercredi 10 décembre 2008 à 20:20:20 |
Re : diaporama javascript avec un lien pour chaque image
feldrik
|
Bien, je te remercie de ta patience,
Pour le moment, si je comprends bien, j'ai un tableau avec des images :
var imagesTodisplay = new Array;
var num=0;
imagesTodisplay[0] = "zi/b_rf_001_renard_polaire.jpg";
imagesTodisplay[1] = "zi/b_rf_002_cheval-przewalski.jpg";
imagesTodisplay[2] = "zi/b_rf_003_renne.jpg";
imagesTodisplay[3] = "zi/b_rf_004_boeuf_musque.jpg";
un tableau avec les correspondances images/url :
var URL_ToDisplay = new Array();
var IMG_ToDisplay = new Array();
var i=0;
URL_ToDisplay[i] = "zi/b_rf_001_renard_polaire.jpg";
IMG_ToDisplay[i++] = "zoomfaune001_renard_polaire_alopex_lagopus.html";
URL_ToDisplay[i] = "zi/b_rf_002_cheval-przewalski.jpg";
IMG_ToDisplay[i++] = "zoomfaune002_cheval_przewalski_equus_przewalskii.html";
URL_ToDisplay[i] = "zi/b_rf_003_renne.jpg";
IMG_ToDisplay[i++] = "zoomfaune003_renne_caribou_rangifer_tarandus.html";
URL_ToDisplay[i] = "zi/b_rf_004_boeuf_musque.jpg";
IMG_ToDisplay[i++] = "zoomfaune004_boeuf_musque_ovibos_moschatus.html";
Et cette commande qui devrait me permettre l'exécution de l'évènement onclick :
var O_Div = document.getElementById(divid);
var szImage = imagesTodisplay[num];
O_Div.style.backgroundImage = "url(" + szImage + ")";
O_Div.onclick = function(){ alert( szImage)}
En l'état et par rapport au code de départ, je sens que j'ai des éléments à remplacer pour que le tout fonctionne, mais je ne sais pas lesquels...
|
|
mercredi 10 décembre 2008 à 20:29:13 |
Re : diaporama javascript avec un lien pour chaque image
PetoleTeam
|
Il faut que tu mettes les URL dans le tableau URL_ToDisplay[]
URL_ToDisplay[i++] = "zoomfaune001_renard_polaire_alopex_lagopus.html";
par exemple.
Le tableau IMG_ToDisplay[] est en fait celui que tu as déclaré sous le nom de imagesTodisplay[], donc n'en garde qu'un des deux.
Cela peut donner en final
var O_Div = document.getElementById(divid);
var szLien = URL_ToDisplay[num];
var szImage = imagesTodisplay[num];
O_Div.style.backgroundImage = "url(" + szImage + ")";
O_Div.onclick = function(){ alert( szLien)}
;O)
|
|
mercredi 10 décembre 2008 à 20:53:13 |
Re : diaporama javascript avec un lien pour chaque image
feldrik
|
Encore merci, mais je vais faire mon Colombo... je comprends la logique, mais en l'état, le diaporama ne se lance plus (image arrière-plan fixe) et les liens ne sont pas actifs.
Je te place le code obtenu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow, all" />
<meta name="author" content="Feldrik Rivat" />
<meta name="description" content="Aquarelles et gouaches animalières entrant dans le cadre de travaux de mise en valeur du patrimoine naturel." />
<meta name="keywords" CONTENT="renard polaire, alopex lagopus, feldrik rivat, peintre naturaliste, peintre animalier, portrait animalier, aquarelle naturaliste, gouache naturaliste " />
<title>Patrimoine naturel, aquarelles et gouaches animalières, le renard polaire, Feldrik Rivat</title>
<style type="text/css">
<!--
body {
margin : 0;
padding : 0;
text-align : center; /* c'est ça qui centre dans IE */
background-color: #000000;}
#conteneur {
position : relative;
margin : 0 auto; /* c'est ça qui centre dans les autres */
padding : 0;
text-align : left;
width : 890px; }
.Style47 {color: #E38B31}
.Style53 {color: #FFF89D}
#apDiv72 {
position:absolute;
left:0px;
top:154px;
width:197px;
height:567px;
z-index:1;
}
#apDiv73 {
position:absolute;
left:425px;
top:750px;
width:52px;
height:27px;
z-index:2;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF89D;
}
#apDiv75 {
position:absolute;
left:740px;
top:765px;
width:159px;
height:35px;
z-index:3;
}
.Style60 {color: #FFF89D;
font-size: 13px;
}
.Style61 {color: #FFFFFF} /* BOITE DU DIAPORAMA */
#boite_diapo { position:absolute;
width:205px;
height:100px;
top:0px;
left:31px;
background-color:none;
background-image:url(zi/b_rf_001_renard_polaire.jpg);} /* IL FAUT IMPERATIVEMENT QUE LE NOM DE L'IMAGE SOIT IDENTIQUE A CELUI DANS LE SCRIPT : tab_img[0]
/* image dans la boite du diaporama */
#img_diapo { width:205px;
height:100px;
filter: alpha(opacity=0); /* fondu pour internet explorer */
-moz-opacity:0; /* fondu pour mozilla, phoenix, firebird, firefox*/
opacity:0; /* fondu pour mozilla firefox */
-khtml-opacity:0.5; /* fondu pour konqueror et safari */
background-color:none;}
-->
</style>
<script language="javascript">
var imagesTodisplay = new Array;
var num=0;
imagesTodisplay[0] = "zi/b_rf_001_renard_polaire.jpg";// TOUJOURS COMMENCER PAR imagesTodisplay[0]
imagesTodisplay[1] = "zi/b_rf_002_cheval-przewalski.jpg";
imagesTodisplay[2] = "zi/b_rf_003_renne.jpg";
imagesTodisplay[3] = "zi/b_rf_004_boeuf_musque.jpg";
//tableau contenant les images
//numéro de l'image jouée
var URL_ToDisplay = new Array();
var numo=0;
URL_ToDisplay[0] = "zoomfaune001_renard_polaire_alopex_lagopus.html";
URL_ToDisplay[1] = "zoomfaune002_cheval_przewalski_equus_przewalskii.html";
URL_ToDisplay[2] = "zoomfaune003_renne_caribou_rangifer_tarandus.html";
URL_ToDisplay[3] = "zoomfaune004_boeuf_musque_ovibos_moschatus.html"; var O_Div = document.getElementById(divid);
var szLien = URL_ToDisplay[numo];
var szImage = imagesTodisplay[num];
O_Div.style.backgroundImage = "url(" + szImage + ")";
O_Div.onclick = function(){ alert( szImage)}
//Ajout d'un compte à rebours afin de jouer le diaporama
var timer_diapo=setInterval("diaporama('boite_diapo','img_diapo',500)",4000); /* Explication des paramètres
'boite_diapo' : identifiant de la boite du diaporama. NE PAS MODIFIER
'img_diapo' : identifiant de l'image contenu dans la boite diaporama. NE PAS MODIFIER.
500 : temps (en milliseconde) de l'effet fondu entre 2 images. 1 seconde = 1000 millisecondes.
7000 : interval de temps entre 2 images. 1 seconde = 1000 millisecondes.
*/
//Fonction qui permet de jouer le diaporama
function diaporama(divid, imageid, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;
document.getElementById(divid).style.backgroundImage = "url(" + imagesTodisplay[num] + ")";
changeOpac(0, imageid);
if (num>(imagesTodisplay.length-2))
{num = -1;}
document.getElementById(imageid).style.backgroundImage = "url(" + imagesTodisplay[num+1] + ")";
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid+ "')",(timer * speed));
timer++;
}
num++;
}
//Fonction qui attribue l'opacité à l'objet "image_diapo"
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body>
<div id="conteneur">
<div id="apDiv72"><a href="rf_realisation_001.html"><img src="zi/r_faune_001_renard_polaire_z.jpg" alt="renard polaire, renard isatis ou renard bleu, Alopex lagopus" title="renard polaire, renard Isatis ou renard bleu, Alopex lagopus" width="900" height="561" border="0" /></a></div>
<div id="apDiv73">
<div align="center"><a href="rf_realisation_001.html"class="Style47 Style53"style="text-decoration:none;"onmouseover="this.style.color='#FFFFFF'" onmouseout="this.style.color='#FFF89D'">Retour</a></div>
</div>
<div id="apDiv75"><a href="galerie_en_ligne.html" class="Style60 Style61"style="text-decoration:none;">A tout instant, vous pouvez visiter ma : </a><a href="galerie_en_ligne.html" class="Style60">Galerie en ligne</a></div>
<div id="boite_diapo" >
<div id="img_diapo"></div>
</div> </div>
</body>
</html> Voilà, je ne vois pas où interviennent les conflits... l'index num ? Et je ne vois pas pourquoi les liens ne s'activent pas.
|
|
Cette discussion est classée dans : image, var, diaporama, opacity, imagestodisplay
 Répondre à ce message
 Sujets en rapport avec ce message
Diaporama image avec fondu enchainé, lien vers page, etdiapo suit scroll de page [ par nonosims ]
salut a tous, je viens vous solliciter pour vous expliquer mon problème. Débutant en script, j'essaye de mettre en place, un bandeau vertical à droite
galerie simple avec image grossissante au survol et replacement auto [ par The Pooh ]
Bonjour à tous. peut être que ce topic existe déjà (cela ne m'étonnerai pas :) mais je ne lai pas trouvé. Voilà j'ai ce script avec ses variable que
redimensionner une image [ par xzonz ]
bonjour a toutes et tous [^^clinoeil1] voila ma question: j'ai une page toute simple (pour le moment) sur laquelle il y a des liens pointant vers de
help!Diaporama ou mur d image [ par ameliecuisine ]
Bonjour, Voila je voudrais creer un diaporama d'image ou un mur d image avec pour chaque image une legende et un lien vers un site internet . Je voudr
Positionnement par rapport à l'écran [ par Tiish ]
Bonjour,Plutôt débutant, je tente désespérément de corriger le script suivant pour que l'image qui apparait se mette pile poil au centre de la page en
diaporama automatique avec liens sur chaque image [ par ju1385 ]
Bonjour, j'ai ici un script simple de diaporama d'image que j'ai récupéré et qui marche bien. Cependant, je voudrais y modifier/ajouter 2 choses (je n
mon diapo ne s'affiche pas sans connection [ par hitu ]
Bonjour j'ai réalisé un diaporama mais celui ne s'affiche pas quand je ne suis pas connecté! Merci d'avance voici mon code: [code=as][code=html]
Redimensionner sans déformer une image avec du Javascript [ par ifuseeknicky ]
Bonjour, actuellement en train de créer un site sur Blogger je suis confronté à un problème de dimensions d'images ! Blog Address: http://blogmpocom
Bloquer un setTimeout [ par ov3rdoze ]
Salut à tousJ'essaye de faire une galerie photo avec un diaporama. Tout fonctionne mais j'ai un problème dans un cas particulier : Si on arrete le dia
Image java base de données php [ par olis1205 ]
Bonjour, J'ai une base de données avec le nom de differentes photos avec plusieurs lignes id id 1 ==> 4 photos id 2 ==> 4 photos ect.. Je souhaite fa
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|