Accueil > Forum > > > > diaporama avec lien vers page sur photo
diaporama avec lien vers page sur photo
mercredi 19 mars 2008 à 13:57:39 |
diaporama avec lien vers page sur photo

Bigbangss
|
bonjour, arretez moi si je me sui trompé de thème. Je cherche actuellement un code à insérer dans une page web me permettant d'afficher un diaporama de photo avec des liens différents vers d'autres pages sur chaque photos. Ce serait exactement un type de diaporama comme celui présent sur cette page . Ya plusieurs codes dans le code source donc je ne sais pas lequel est le bon, n'étant pas un connaisseur de javascript..... Help!!  
|
|
mercredi 19 mars 2008 à 14:08:24 |
Re : diaporama avec lien vers page sur photo

XtremDuke
|
Heu... d'après ce que j'ai vu sur ton exemple, ce n'est rien d'autre que des ancres avec une image...
|
|
mercredi 19 mars 2008 à 14:14:47 |
Re : diaporama avec lien vers page sur photo

Bigbangss
|
eeeeuh traduction? parce que ya du texte ki change aussi donc je vois pas trop...g trouvé un script avec diapo la..mais maintenant i me faudrai rajouter du texte avec.
voila ce code :
<html > <head> <script type="text/javascript" > <!-- timeDelay = 2000; var Pix = new Array ("images/Best-Thing-Smokin-Vol-7-mid7563-large.jpg" ,"images/calltheboss20.jpg" ,"images/cover front.jpg" ,"img_transports/picto_memoire_archive.gif" ,"images/Visu_mixtape_gangstamusik.jpg" ,"images/RNB.jpg" ,"img_transports/picto_huitre.gif" ,"img_transports/picto_buss.gif" ,"img_transports/picto_buss.gif" ); var howMany = Pix.length; var PicCurrentNum = 0; var PicCurrent = new Image(); PicCurrent.src = Pix[PicCurrentNum];
function startPix() {x = document.getElementById('lien'); setInterval("slideshow()", timeDelay);}
var lien = new Array ("../../La_Charente-Maritime/Patrimoine/patrimoine_naturel/Patrimoine_Littoral/Les_plages.htm" ,"../../La_Charente-Maritime/Patrimoine/patrimoine_naturel/Tourisme_Peche/Accueil_Peche_17" ,"../../infos_touristiques/accueil_infos_touristiques.htm" ,"../../La_Charente-Maritime/Archives_departementales/acceuil_Archives.htm" ,"../../La_Charente-Maritime/Patrimoine/patrimoine_naturel/Patrimoine_Littoral/Littoral_Iles_Midi_Atlantique.htm" ,"../../La_Charente-Maritime/Patrimoine/patrimoine_culturel/patrimoine_roman/Roman_Patrimoine_europeen.htm" ,"../../Ile_Oleron/patrimoine_littoral/Littoral_huitre_claires_M-O.htm" ,"accueil_transports_scolaires.htm" ,"../../La_Charente-Maritime/Patrimoine/patrimoine_naturel/Poles-Nature_17/poles_17.htm");
function slideshow() { PicCurrentNum++; if (PicCurrentNum == howMany) { PicCurrentNum = 0; } PicCurrent.src = Pix[PicCurrentNum]; document["ChangingPix"].src = PicCurrent.src; x.href=lien[PicCurrentNum]; } // End --> </script> <title></title> </head>
<body onLoad=";startPix()"> <a id="lien" href="#"> <img src="images/logo.jpg" name="ChangingPix" width="522" height="330" border="0" /></a> </body> </html>
|
|
mercredi 19 mars 2008 à 14:27:54 |
Re : diaporama avec lien vers page sur photo

XtremDuke
|
Désolé je n'ai pas regardé au bon endroit. Il y a effectivement un 'diaporama'.
Et en regardant le source, on découvre une série de 'div' toutes en 'display:none'. Plus loin on trouve un timer qui affiche une après l'autre les div à intervalle régulier.
|
|
mercredi 19 mars 2008 à 14:31:03 |
Re : diaporama avec lien vers page sur photo

Bigbangss
|
je vois. je saurais pas le traduire en code par contre...pourrait tu me faire un copier coller du code? ou l'indiquer où est ce qu'il est situé? Ca reste quand même du javascript?
|
|
mercredi 19 mars 2008 à 14:43:50 |
Re : diaporama avec lien vers page sur photo

XtremDuke
|
Pour être bref :
Tu crée une serie de 'div' avec tes images/liens à l'interieur.
Exemple :
<div class="maDiv"> <img src="toto.gif" alt=""/> <a href="..." title="">Blabla</a> </div>
<div class="maDiv"> <img src="toto2.gif" alt=""/> <a href="..." title="">Blabla2</a> </div>
etc...
"maDiv" étant la le nom de la classe de ton calque. Celle-ci doit avoir l'attribut 'display:none' afin de cacher le calque.
Puis, au chargement de ton document, tu lances un script Javascript qui va s'occuper : - de récuperer la liste des 'div' - d'afficher/masquer les 'div' à intervale régulier
Exemple :
var lstGalery = [];
function launchGalery(){ lstGalery = document.getElementsByTagName('div'); viewGalery(1); }
function viewGalery(numDiv){ if(numDiv==lstGalery.length) numDiv = 0; for(var i=0; i<lstGalery.length; i++) lstGalery[i].style.display = numDiv== i ? 'block' : 'none'; numDiv++; setTimeout("viewGalery("+numDiv+")", 2000); //toutes les 2sec }
window.onload = launchGalery;
Maintenant il y a certainement des erreurs car j'ai pondu ça dans la foullée mais l'idée est là.
|
|
mercredi 19 mars 2008 à 14:53:24 |
Re : diaporama avec lien vers page sur photo

Bigbangss
|
je doi les placer à un endroit précis ces div? dans le html tu met "maDiv" comme nom. C'est pas le même nom qui doit apparaître dans le script?
|
|
mercredi 19 mars 2008 à 15:11:33 |
Re : diaporama avec lien vers page sur photo

XtremDuke
|
Re,
Tu places tes 'div' dans ton document à l'endroit où tu veux qu'elles apparaissent. Si possible dans un conteneur de dimensions égales à tes 'div'. Exemple :
<div id="zoneDiv"> <div class="maDiv"> <img src="toto.gif" alt=""/> <a href="..." title="">Blabla</a> </div> etc... </div>
Biensûr, il convient de modifier le script que je t'ai fournis : Remplace : function launchGalery(){ lstGalery = document.getElementsByTagName('div'); viewGalery(1); } Par function launchGalery(){ lstGalery = document.getElementById('zoneDiv').getElementsByTagName('div'); viewGalery(1); }
Pour ce qui est de 'maDiv', ce n'est pas le nom des 'div' mais le nom de la classe CSS auquelle elles héritent.
Exemple de CSS :
<style type="text/css"> div.maDiv{ display: none; } </style>
|
|
mercredi 19 mars 2008 à 15:18:07 |
Re : diaporama avec lien vers page sur photo

Bigbangss
|
jte remercie je test ca....tu pense que mes petites div pourrait etre éditées à partir d'une autre page html?
|
|
mercredi 19 mars 2008 à 15:22:21 |
Re : diaporama avec lien vers page sur photo

XtremDuke
|
Etant donné que je n'ai rien d'autre à faire, voilà un exemple complet du type de diapo qu'utilise ton site. Copie/colle le script dans une nouvelle page et regarde le résultat :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Exemple</title> <style type="text/css"> #zoneDiv{ margin:24px; } div.maDiv{ display:none; } </style> </head> <body> <div id="zoneDiv"> <div class="maDiv"> <img src="http://themysteryoflife.files.wordpress.com/2007/09/i-love-google-2.jpg" alt=""/> <br/> <a href="http://www.google.fr" title="">Google</a> </div> <div class="maDiv"> <img src="http://sirini.net/grboard/data/userphoto/microsoft_bill_gate.jpg" alt=""/> <br/> <a href="http://www.microsoft.fr" title="">Microsoft</a> </div> <div class="maDiv"> <img src="http://mitchellhashimoto.com/wp-content/uploads/2007/10/apple_showtime.jpg" alt=""/> <br/> <a href="http://www.apple.fr" title="">Apple</a> </div> </div> <script type="text/javascript"> var lstGalery = []; function launchGalery(){ lstGalery = document.getElementById('zoneDiv').getElementsByTagName('div'); viewGalery(1); }
function viewGalery(numDiv){ if(numDiv==lstGalery.length) numDiv = 0; for(var i=0; i<lstGalery.length; i++) lstGalery[i].style.display = numDiv== i ? 'block' : 'none'; numDiv++; setTimeout("viewGalery("+numDiv+")", 2000); //toutes les 2sec }
window.onload = launchGalery; </script> </body> </html>
|
|
Cette discussion est classée dans : page, code, lien, photo, diaporama
Répondre à ce message
Sujets en rapport avec ce message
cadre autour d'un lien sur une photo [ par cristina49 ]
bonjour,j'ai un petit soucis hyper urgent. je doit mettre le site en ligne et je peut pas en laissant ca comme ca ... j'ai beaucoup de lien sur une pa
lien sur photos en javascript [ par missFlo17 ]
Bonjour bonjour,Voilà, j'ai un diaporama de photos en javascript et j'aimerai que chaque photo correspond à un lien vers une page (1 page différente p
lien vers photo [ par fabz01 ]
Bonjour à tous, Voilà je suis débutant et je rame énormément avec le javascript. j'ai un exo à faire et ça fait pas mal de temp que je galère (quand
Question code double lien sur même page [ par philoumexes ]
Bonjour, je suis tout neuf! dans ce forum et surtout dans le javascript, et j'ai besoin de vous!!!J'ai appliqué ce, tiré d'un code posté en 2003, et i
Modifier la balise herf [ par wassimbik ]
Bonjour à tous J'ai utilisé Code : JavaScriptdo
Messages style forum sur une page web [ par galadriel2710 ]
bonjour, voila j'ai un ami qui a un site web il m'a demande pour mettre une page ou l'on pourra ecrire un message style forum je crois s'avoir que l
aide [ par reftotodev ]
Bonjour à tous J'aimerai creer une page sur mon site avec un lien en savoir plus qui me permettra de rajouter du texte dans la page et un lien Fermer
Agrandir une photo à partir d'une vignette sur la même page [ par mquisuisje ]
Bonjour et bravo à l'aide qu'apporte ce site..C'est la 1ère fois que je pose une question sur ce site mais je le parcours de temps en temps. Mon amie
Solution pour cacher un mot de passe d'accès d'une page [ par bojolais ]
Bonjour,Je ne parviens pas à trouver un code qui me permettrait de cacher le mot de passe d'acces à une page.Pour accéder à une page j'ai créé un mot
Chemin vers une page PHP [ par Peoxus ]
Bonjour, Je ne sais pas si c'est bien ici que je dois poser ma question stupide. J'ai suivi le tuto http://www.tutorialspoint.com/ajax/ajax_database
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
|