begin process at 2012 05 29 08:10:36
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

diaporama avec lien vers page sur photo


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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>


1 2 3

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


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,312 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales