Sujet Précédent Sujet Suivant

Diaporama javascript avec un lien pour chaque image

cs_feldrik Messages postés 15 Date d'inscription mercredi 10 décembre 2008 Statut Membre Dernière intervention 11 décembre 2008 - 10 déc. 2008 à 11:04
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 11 déc. 2008 à 22:46

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
</script>
</head>





</html>

J'attends vos réponses avec impatience,

Merci d'avance !

A voir également:

Diaporama javascript avec un lien pour chaque image
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Convolution image - Conseils pratiques -Java
Afficher lien hypertexte excel ✓ - Forum Visual Basic
Telecharger une image avec un lien ✓ - Forum PHP

23 réponses

Réponse 21 / 23

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
11 déc. 2008 à 22:23

plutôt pas mal du tout tes aquarelles et j'apprécie
fort cet art...
juste une remarque toutefois, pas sur tes réalisations
artistiques, mais sur le contenu de ta page il y a trois fois le même code...un
copier/coller insistant je présume.
;O)

Réponse 22 / 23

cs_feldrik Messages postés 15 Date d'inscription mercredi 10 décembre 2008 Statut Membre Dernière intervention 11 décembre 2008
11 déc. 2008 à 22:41

Oui... c'est un peu le bronx dans cette page, il faut que je nettoie ça ! Avec la version remaniée que tu m'as fourni, ça devrait être plus propre. Ceci dit, comme je ne suis encore qu'un apprentit bidouilleur, je fais un code différent et indépendant pour chaque diaporama. Il doit exister une solution plus simple, mais pourquoi ne pas tester quelque chose de bien compliqué avant de découvrir les joies de la simplicité !

Et merci pour le compliment ;-)

Réponse 23 / 23

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
11 déc. 2008 à 22:46

RIEN RIEN
Je te souhaites juste de faire tes codes comme tu fait tes aquarelles et la je n'ai aucun doute.
Bonne continuation.
;O)

Discussions similaires

integrer une variable javascript dans un lien hypertext

Partie entiére d'un nombre

Signaler un lien mort

Afficher les liens hypertextes qui sont associés à des cellules Excel.

Excel : récupérer lien hypertexte

Votre réponse

Discussions similaires