diaporama panoramique javascript

Version imprimable

bonjour
je débute vraiment en javascript. j'ai trouvé un script que j'ai adapté pour un site.Il s'agit d'un diaporama panoramique. Il me convient mais je souhaiterais une modification que je n'arrive pas à réaliser.
Comme vous pouvez le voir sur le lien ci-dessous, les photos du diaporama du haut défilent à gauche ou à droite mais en boucle, c'est là mon problème.
Je voudrais que celles-ci défilent et s'arrêtent par rapport à sa dimension vers la gauche ou la droite.
voici le lien : http://galaxyweb.free.fr/systeme.php

voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!--//
// personalisation de la fenêtre d'affichage du diaporama
function PL(){ 
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
}
function TT(){ 
 
MX=7 // Entrez le nombre Total d'images
}
image="diaporama360/photos/stockholm1.jpg"; // l'adresse complete de l'image à afficher au demarrage
/*
Donnez l'adresse complete de chaque image et tenez compte que vous avez la possibilité d'importer 
des images externes de toutes sortes dans les mêmes dimentions que le diaporama
*/
var imgUrl=new Array(); 
imgUrl[0]="diaporama360/photos/stockholm1.jpg"; 
imgUrl[1]="diaporama360/photos/stockholm.jpg"; 
imgUrl[2]="diaporama360/photos/etoile.gif"; 
imgUrl[3]="diaporama360/photos/images.gif"; 
imgUrl[4]="diaporama360/outils/background.jpg"; 
imgUrl[5]="diaporama360/photos/ciel.jpg"; 
imgUrl[6]="diaporama360/photos/soir.jpg"; 
 
/*
la liste d'images: entrez ici les noms ou les titres des images
*/
 
op = '<option value="'
fop = '</option>'
 
image1  = op+imgUrl[0]+'">Bienvenus'+fop;
image2  = op+imgUrl[1]+'">stockholm'+fop; 
image3  = op+imgUrl[2]+'">Des étoiles'+fop;
image4  = op+imgUrl[3]+'">Des images'+fop;
image5  = op+imgUrl[4]+'">Background mobil'+fop;
image6  = op+imgUrl[5]+'">Ciel sur mer'+fop;
image7  = op+imgUrl[6]+'">Beauté du soir'+fop; // Ajouter des option, si vous voulez 
 
L = image1+image2+image3+image4+image5+image6+image7 // entrez ici les nouvelles images dans l'ordre
 
 
/*
création du diaporama
*/
 
Limg=498 ; // Largeur de l'image
Himg=220 ; // Hauteur de l'image
/*
creation de la commande de vitesse
*/
Mask="diaporama360/outils/gif1.gif"; // adresse comlete de l'image mask
Lmsk=60 ; // Largeur de l'image mask
Hmsk=240 ; // Hauteur de l'image mask
Lmskstop=12 ; // Largeur de la commande Stop
bordure=1 ; // si vous ne voulez pas de bordure alors mettez 0
couleur="#003366" ; // entrez la couleur de la bordure
document.write('<style type="text/css" media="screen">');
document.write('#Diapo360{width: '+ Limg + 'px; height: '+ Himg +'px; background-color:#000000;}'+'IMG {cursor: pointer;};');
document.write('</style>');
var Diapo360 = document.getElementById("Diapo360");
Diapo360.style.border      = "solid "+bordure+"px "+couleur;
Diapo360.style.background  = "url("+image+")  repeat";
X = 1;   // glissement à un coté
Y = -1;  // glissement inversé
D = 10;  // vitesse de rotation
/*
image mask pour variation de vitesse
*/
imd= '<img onmouseover=\'Y = ';
imf= '\' border=0 src=diaporama360/outils/gif1.gif width='+Lmsk+' height='+Hmsk+'>';
/*
la largeure de l'image mask pour le stop
*/
imfs= '\' border=0 src='+Mask+' width='+Lmskstop+' height='+Hmsk+'>';
setInterval('Deroulement()', 90); // 90 = Duré du pause
function Deroulement()
{
X += Y / D*100 ;
document.getElementById("Diapo360").style.backgroundPosition = X + "px";
}
/*
creation et affichage des images maske pour commonder la vitesse 
Pour augmenter ou deminuer la vitesse à droite et à gauche Vous pouvez modifier les valeurs dans les lignes suivantes
pour faire tourner avec ou contre le mouvement du curseur il suffit de changer les valeurs positive contre les valeurs negatives au lignes suivantes.
*/
var editer  = ""+
imd+ 7 + imf+
imd+ 2.5 + imf+
imd+ 0.7 + imf+
imd+ 0.3 + imf+
imd+ 0 + imfs+ // la commonde du stop
imd+ -0.3 + imf+
imd+ -0.7 + imf+
imd+ -2.5 + imf+
imd+ -7 + imf+
""; // on peut ajouter et supprimer des masks de vitesse dans les deux sens
Diapo360.innerHTML =(editer);
/*
Option de sélection et remplacement d'images
*/ 
var selection = 0;
function versplus() {
TT()
// annonce la fin du diaporama
if (selection >=MX-1)
alert('Fin du diaporama pour afficher d\'autres images \n\rCliquer sur: [ <<= ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection < document.forms[1].elements[0].length-1) {selection ++;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function versmoins() {
// annonce le debut du diaporama
if (selection == 0)
alert('Debut du diaporama pour afficher d\'autre images \n\rCliquer sur: [ =>> ]\r\nOu sélectionnez une image dans la liste.');
selection = document.forms[1].elements[0].selectedIndex;
if (selection > 0) {selection --;} 
document.forms[1].elements[0].selectedIndex=selection;
}
function ChoiX(selection) {
document.forms[1].elements[0].selectedIndex = selection;
}
// Affiche l'image sélectionnée sur la liste deroulante
function ApLiQuE() {
selection = document.forms[1].elements[0].selectedIndex;
document.Diapo360.style.backgroundImage = "url("+ imgUrl[selection] +")";
}
// Création des liens
function changeliens(FF,x)
{
if(document.getElementById)
document.getElementById(x).innerHTML = FF;
}
// Affichage des liens
function AFICHE()
{
changeliens('<a title="afficher la page d\'information" target=_blank href='+document.imageimportee.choix.value+'.htm><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 3px" border=0 src=outils/apage.gif width=16 height=16> Page','lien_page'); changeliens('<a title="afficher l\'image entière" target=_blank href='+document.imageimportee.choix.value+'><img style="MARGIN-TOP: 5px; MARGIN-BOTTOM: 1px; MARGIN-RIGHT: 1px; MARGIN-LEFT: 5px" border=0 src=outils/aimage.gif width=16 height=16> Image','lien_image');
}
CO='<span style="FONT-SIZE: 7pt"><a title="Pur Tout Contact Cliquez ICI" style="TEXT-DECORATION: none" href="http://siv.site.voila.fr/index.htm" target="_blank"><font color="#353535"></font></a></span>';
// Tres important: si vous utilisez des images importés d'autres emplassements... vous devez créer un liens vers la page d'information en relation, si non suprimez le liens de la page.
// -->

Merci de votre réponse

28/09/2010, 20h50
Bovino

Citation:

Envoyé par ideal23

voici le lien : http://localhost/birds1/systeme.php

Effectivement... ça aide pour visualiser la chose :roll:
29/09/2010, 00h36
ideal23

milles excuses, voici le bon lien: http://galaxyweb.free.fr/systeme.php
29/09/2010, 08h48
ideal23

avez-vous pu accéder au lien de démonstration de mon problème?
Merci pour votre réponse
04/10/2010, 16h42
ideal23

personne n'a une idée de modification du script?

au lieu de faire défiler le panoramique en boucle, Je souhaite pouvoir diriger ces images vers la droite ou vers la gauche, scrolling qui stop aux bords gauche et droit du panoramique. Ce doit être un panoramique 180°
EXEMPLE :http://www.hochsicht.ch/francais/index.html
dans le menu cliquer sur galerie,puis panorama.
Merci

Ce code peut répondre à tes besoins:
Y'a un exemple et une classe php pour alimenter dynamiquement le défilant depuis un répertoire ou une bdd (mais tu peux l'alimenter manuellement).

code php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<?php
header('Content-type: text/html; charset=UTF-8');
 
 
class connect_bdd {
 
        private static $instance;
 
            private function __construct() {
 
                require_once('Connections/alainweb.php');
                mysql_select_db($database_alainweb, $alainweb);    
                mysql_query("SET NAMES 'utf8'");
            }
 
            public static function getInstance() {
 
                if(self::$instance == NULL) self::$instance = new connect_bdd;
 
                return self::$instance;
            }    
}
 
 
class DF_ObjetDefilant
{
 
// VARIABLES INTERNES A LA CLASSE
private $id = null;
private $largeur_totale = 0;
private $hauteur_max = 0;
private $code_html = '';
private $margin_sens = 'g';
private $dossier_images = null;    
private $tableau_images = array();
 
 
 
    // Retourne le tableau d'images provenant d'une bdd (deux tables)
    private function Img_table ($defilant_index)
    {
        $tab_images = array();
 
        // Connexion à la bdd, exemple en local
        connect_bdd::getInstance();
        //mysql_connect("localhost", "root");
        //mysql_select_db("ma_base");
 
        $query = "SELECT
 
                     defilant_nom.Designation
                    ,defilant_nom.Image
 
                    ,defilant_images.Largeur
                    ,defilant_images.Hauteur
                    ,defilant_images.Description
                    ,defilant_images.Lien
 
                    FROM defilant_nom
 
                    LEFT JOIN defilant_images
                    ON defilant_nom.Image = defilant_images.Image
 
                    WHERE defilant_nom.Designation = '".mysql_real_escape_string($defilant_index)."'
 
                    ORDER BY defilant_nom.Ordre ASC";
 
 
        $ressource = mysql_query($query);
 
        if($this->debug == true && !$ressource) die (mysql_error());
 
        if ($ressource)
            {
                while ($images = mysql_fetch_assoc($ressource))
                    {
                        $this->tableau_images[$images['Image']]['Larg'] = $images['Largeur'];        
                        $this->tableau_images[$images['Image']]['Haut'] = $images['Hauteur'];        
                        $this->tableau_images[$images['Image']]['Descrip'] = $images['Description'];        
                        $this->tableau_images[$images['Image']]['Li'] = $images['Lien'];        
                    }
            }
 
        if ($this->debug == true && count($this->tableau_images) == 0) die ("Objet '$this->id' : Aucune valeur nommée '$defilant_index' n'a été trouvée dans la table");
    }    
 
 
 
    // Retourne le tableau d'images provenant d'un dossier
    private function Img_dossier ()
    {
        $dossier = $this->dossier_images.'*.{jpg,jpeg,gif,png}';
 
        $this->tableau_images = glob($dossier,GLOB_BRACE);    
 
        $this->tableau_images = array_map('basename',$this->tableau_images);        
        $this->tableau_images = array_flip($this->tableau_images);
 
        if (count($this->tableau_images) == 0 && $this->debug == true) die ("Objet '$this->id' : Aucun fichier avec l'extension jpg, jpeg, gif ou png n'a été trouvé dans le dossier $this->dossier_images");
    }
 
 
 
    // Défini le dossier image
    private function Chem_dossier ($dossier_image,$table_index)
    {    
        if (!empty($dossier_image) && is_dir($dossier_image))
 
        $this->dossier_images = $dossier_image.'/';
 
        else if ($this->debug == true)
 
            {
                if (empty($dossier_image) && !isset($table_index))
                        die("Objet '$this->id' : L'indication d'un dossier d'images valide est indidpensable comme premier argument dans la fonction 'Set_param', excepté si le second argument est utilisé pour une recherche en bdd avec des adresses d'images absolues.");    
                else
 
                if (!empty($dossier_image))
                        die("Objet '$this->id' : Le dossier '$dossier_image' indiqué comme premier argument dans la fonction 'Set_param' est invalide, ou son chemin relatif n'est pas correct par rapport au script en cours.");        
            }
    }
 
 
 
    // Défini la largeur totale, la hauteur maximale et le tableau des images valides (largeur et hauteur non nulles)
    private function Set_param_dim ()    
    {            
        foreach ($this->tableau_images as $key => $value)
            {
                $largeur = !empty($value['Larg'])? $value['Larg'] : 0;
                $hauteur = !empty($value['Haut'])? $value['Haut'] : 0;
 
                if(empty($largeur) || empty($hauteur)) list($largeur,$hauteur) = @getimagesize($this->dossier_images.$key);
 
                if (!empty($largeur) && !empty($hauteur))
                        {    
                            $this->largeur_totale += $largeur;
                            $this->hauteur_max = $hauteur > $this->hauteur_max ? $hauteur : $this->hauteur_max;
                        }
 
                        else
 
                            unset($this->tableau_images[$key]);
            }    
    }    
 
 
 
    // Paramètres complémentaires et affinage des dimensions
    private function Set_param_comp ()
    {
        if(!empty($this->espacement_image))
            {
                if ($this->mode_defilement == 'r')
 
                $this->largeur_totale +=  intval($this->espacement_image) * (count($this->tableau_images)-1);
 
                else
 
                $this->largeur_totale +=  intval($this->espacement_image) * count($this->tableau_images);
            }
 
        if (!empty($this->bord_images))
            {
                $bord_images = trim($this->bord_images);
                $epaisseur = substr($bord_images,0,strpos($bord_images,'px'));
                $epaisseur = is_numeric($epaisseur) && $epaisseur > 0 ? $epaisseur : 0;
 
                $this->largeur_totale += 2 * $epaisseur    * count($this->tableau_images);
                $this->hauteur_max += 2 * $epaisseur;
            }
 
        $this->margin_sens = $this->sens_defilement == 'g' ? 'margin-right' : 'margin-left';    
    }
 
 
 
    // Formate le code
    private function Formate_code ()
    {
        $destination = $this->destination_liens == 'self'? null : 'onclick = "this.target=\'_blank\'"';
 
        $style = !empty($this->espacement_image) ? 'style = "'.htmlspecialchars($this->margin_sens).':'.htmlspecialchars($this->espacement_image).'px;border:'.htmlspecialchars($this->bord_images).'"' : 'style = "border:'.htmlspecialchars($this->bord_images).'"';
 
        $i = 1;
 
        foreach ($this->tableau_images as $key => $value)
            {
                $alt = isset($value['Descrip']) && trim($value['Descrip']) != '' ? $value['Descrip'] : $key;
 
                $lien = isset($value['Li']) && trim($value['Li']) != '' ? $value['Li'] : null;
 
                $style = !empty($this->espacement_image) && $i == count($this->tableau_images) && $this->mode_defilement == 'r' ? 'style = "border:'.htmlspecialchars($this->bord_images).'"' : $style;
 
                $this->code_html .= isset($lien)? '<a href = "'. htmlspecialchars($lien).'" '.$destination.'><img src = "'.htmlspecialchars($this->dossier_images.$key).'" alt = "'.htmlspecialchars($alt).'" title = "'.htmlspecialchars($alt).'" '.$style.' /></a>' : '<img src = "'.htmlspecialchars($this->dossier_images.$key).'" alt = "'.htmlspecialchars($alt).'" title  = "'.htmlspecialchars($alt).'" '.$style.' />';
 
                $i++;
            }        
    }
 
 
 
    // Chargement de la fonction DF_ObjetDefilant
    public function Load_ObjetDefilant ()
    {
        $param = "addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('".$this->id."','".$this->largeur_totale."','".$this->mode_defilement."','".$this->sens_defilement."','".$this->vitesse_defilement."','".$this->position_depart."','".$this->espacement_boucle."','".$this->pause_depart."')});\n";
 
        echo htmlspecialchars($param);
    }
 
 
 
    // Affiche le code html à faire défiler
    public function Affiche_code_html ()
    {
        echo $this->code_html;
    }    
 
 
 
    // Affiche la hauteur de la plus haute image
    public function Affiche_hauteur ()
    {
        echo intval($this->hauteur_max).'px;';
    }
 
 
 
    // Affiche le mode debug si true
    private function Affiche_debug ()
    {
        echo '<span style="background:#FFFFFF;font-family:arial;font-size:11px;">&nbsp;Mode debug&nbsp;</span>';
    }
 
 
    // Constructeur
    public function __construct ($id = null)
    {
        if($this->debug == true) $this->Affiche_debug();
 
        if (isset($id) && preg_match('#^\D#',$id)) $this->id = $id;
 
        else if ($this->debug == true) die("Objet '$id' : ID null ou non valide. L'id de l'objet défilant doit être déclaré comme paramètre dans l'instanciation de la classe. Un id valide commence par une lettre.");    
    }
 
 
 
    // Récupère les paramètres et excécute le code
    public function Set_param ($dossier_image = null, $table_index = null)
    {
        $this->Chem_dossier ($dossier_image, $table_index);
 
        isset($table_index)? $this->Img_table($table_index) : $this->Img_dossier();    
 
        $this->Set_param_dim ();
 
        if (count($this->tableau_images) > 0)
            {
                $this->Set_param_comp ();
                $this->Formate_code ();
            }
 
            else
 
            if ($this->debug == true)
 
                {
                    if (isset($table_index) && isset($dossier_image))
 
                        {
                            die("Objet '$this->id' : Les noms des fichiers images dans la bdd ne correspondent à aucune image du dossier '$dossier_image', ou les images sont invalides.");    
                        }
                        else if (isset($table_index))
                            {
                                die("Objet '$this->id' : Les chemins des fichiers images dans la bdd sont invalides, ou les images sont invalides.");                                
                            }
                            else  
                                {
                                    die("Objet '$this->id' : Les images du dossier '$dossier_image' sont invalides.");    
                                }
                }                
    }
 
 
 
    //VALEURS PAR DEFAUT
 
    //espacement entre les images en pixels
    public $espacement_image = '0';
    // b pour boucle continue, r pour aller retour
    public $mode_defilement = 'b';
    // g pour défilement vers la gauche, d pour défilement vers la gauche
    public $sens_defilement = 'g';
    // Vitesse : 8 mminimum (les nombre plus petits sont les plus rapides)
    public $vitesse_defilement = '25';
    // Position de départ en pourcentage par rapport à la largeur du cadre - mettre une valeur voisine de zero, ex 0.0001 pour obtenir un équivalent de 0 si la largeur du cadre est (ou risque d'être) plus large que la totalité des images (cf mode d'emploi de la fonction)
    public $position_depart = '0';
    // Espacement entre deux boucles (mettre 0 pour un tableau d'images et utiliser $espacement_image pour espacer les images)
    public $espacement_boucle = '0';
    // Temps d'attente avant le démarrage du défilant en miliseconde
    public $pause_depart = '1000';
    // Ouverture des liens dans une nouvelle fenêtre ('nf' pour nouvelle fenêtre 'self' pour même fenêtre)
    public $destination_liens = 'self';
    // Bord des images à formater selon les normes CSS en pixels ex : '1px solid #CCCCCC' pour un pixel trait continu gris clair
    public $bord_images = '0';
 
 
    // Mettre la valeur 'true' uniquement en phase de test (peut affecter l'affichage avec certains navigateurs);
    private $debug = false;
 
}
 
 
 
// EXEMPLE 1 : Faire défiler les images d'un répertoire
// Initialisation de l'objet en indiquant l'identifiant (id) html concerné
$def_rep = new DF_ObjetDefilant('vignettes_du_repertoire');
// Définitions de quelques paramètres (modification des valeurs par défaut de la classe)
$def_rep-> bord_images = '1px solid #666666';
$def_rep-> espacement_image = '15';
// Envoi des paramètres en indiquant le chemin du dossier
$def_rep-> Set_param('Images_defilant');
 
 
 
// EXEMPLE 2 : Faire défiler des images sélectionnées depuis une base de données en indiquant un répertoire (seul le nom des images est dans la table)
// Initialisation de l'objet en indiquant l'identifiant (id) html concerné
$def_base_nom_image = new DF_ObjetDefilant('vignettes_select_base');
// Définitions de quelques paramètres (modification des valeurs par défaut de la classe)
$def_base_nom_image-> espacement_image = '50';
$def_base_nom_image-> bord_images = '10px solid #F0F0F0';
$def_base_nom_image-> vitesse_defilement = '12';
$def_base_nom_image-> pause_depart = '2000';
$def_base_nom_image-> destination_liens = 'nf';
$def_base_nom_image-> mode_defilement = 'r';
// Envoi des paramètres en indiquant le chemin du dossier, et en second paramètre l'identifiant de sélection dans la base de donnée
$def_base_nom_image-> Set_param('Images_defilant','Defilant 1');
 
 
 
// EXEMPLE 3 : Faire défiler des images sélectionnées depuis une base de données avec des adresses d'images absolues
$def_base_adres_image = new DF_ObjetDefilant('vignettes_abs_select_base');
// Définitions de quelques paramètres (modification des valeurs par défaut de la classe)
$def_base_adres_image-> pause_depart = '3000';
$def_base_adres_image-> espacement_image = '8';
$def_base_adres_image-> vitesse_defilement = '25';
// Envoi des paramètres sans indiquer le dossier des images, et en second paramètre l'identifiant de sélection dans la base de donnée
$def_base_adres_image-> Set_param('','Defilant 2');
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Générateur objet défilant tableau d'images http://www.abciweb.net</title>
<script src="Scripts/objet-defilant.js" type="text/javascript"></script>
 
<script type="text/javascript">
<!--
//Chargement des objets défilants
 
<?php $def_rep->Load_ObjetDefilant()?>
<?php $def_base_nom_image->Load_ObjetDefilant()?>
<?php $def_base_adres_image->Load_ObjetDefilant()?>
-->
</script>
 
<style type="text/css">
<!--
 
#cadre_vinettes_rep {
    position: relative;
    border: 10px solid #999999;
    width: 600px;
    height: <?php $def_rep->Affiche_hauteur()?>
    margin: auto;
    overflow: hidden;
    background:#fff;
}
 
 
#cadre_vinettes_base {
    border: 10px solid  #999999;
    width: 600px;
    height: <?php $def_base_nom_image->Affiche_hauteur()?>
    margin: auto;
    overflow: hidden;
    background: #FCFCFC;
}
 
#conteneur_defil, #conteneur_defil2, #conteneur_defil3 {
    position : relative;
    visibility:hidden;
    overflow : hidden;
    height:100%;
}
 
#cadre_vinettes_abs_base {
    border: 15px solid #993333;
    width: 180px;
    height: <?php $def_base_adres_image->Affiche_hauteur()?>
    margin: auto;
    overflow: hidden;
    background: #000000;
}
-->
</style>
</head>
 
<body style="background:#000000;margin-top:3em">
 
 
<div id="cadre_vinettes_rep">
 <div id="conteneur_defil">
          <div id="vignettes_du_repertoire"  onmouseover = "DF_ObjetDefilant_Off('vignettes_du_repertoire')"  onmouseout = "DF_ObjetDefilant_On('vignettes_du_repertoire')">
            <?php $def_rep->Affiche_code_html()?>
        </div>
    </div>
 </div>
 
<div onclick = "DF_ObjetDefilant_Inverse('vignettes_du_repertoire')" style="width:25px;margin:auto; cursor:pointer;">
<img src="http://www.abciweb.net/images_nav/fleche-double-sens-noir.png" width="25" height="15"  alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>
 
 
 
 
<div id="cadre_vinettes_base" style="margin-top:3em">
  <div id="conteneur_defil2">
          <div id="vignettes_select_base"  onmouseover = "DF_ObjetDefilant_Off('vignettes_select_base')"  onmouseout = "DF_ObjetDefilant_On('vignettes_select_base')">
            <?php $def_base_nom_image->Affiche_code_html()?>
        </div>
    </div>
 </div>
 
<div onclick = "DF_ObjetDefilant_Inverse('vignettes_select_base')" style="width:25px;margin:auto; cursor:pointer;">
<img src="http://www.abciweb.net/images_nav/fleche-double-sens-noir.png" width="25" height="15"  alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>
 
 
 
 
<div id="cadre_vinettes_abs_base" style="margin-top:3em">
  <div id="conteneur_defil3">
          <div id="vignettes_abs_select_base"  onmouseover = "DF_ObjetNavigMous('vignettes_abs_select_base','over')"  onmouseout = "DF_ObjetNavigMous('vignettes_abs_select_base','out')">
            <?php $def_base_adres_image->Affiche_code_html()?>
        </div>
    </div>
</div>    
 
<div onclick = "DF_ObjetDefilant_Inverse('vignettes_abs_select_base')" style="width:25px;margin:auto; cursor:pointer;">
<img src="http://www.abciweb.net/images_nav/fleche-double-sens-noir.png" width="25" height="15"  alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>
 
 
</body>
</html>

Tables utilisées dans l'exemple :
Code sql:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
CREATE TABLE `defilant_nom` (
  `Designation` varchar(100) NOT NULL,
  `Image` varchar(100) NOT NULL,
  `Ordre` float UNSIGNED DEFAULT '1',
  PRIMARY KEY  (`Image`),
  KEY `Designation` (`Designation`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
-- 
-- Contenu de la table `defilant_nom`
-- 
 
INSERT INTO `defilant_nom` (`Designation`, `Image`, `Ordre`) VALUES
('Defilant 1', 'amazigh-100.jpg', 3),
('Defilant 1', 'fonte-flamme-100.jpg', 2),
('Defilant 1', 'marpillat-100.jpg', 1),
('Defilant 2', 'http://www.abciweb.net/PHOTO/ATV_45.jpg', 2),
('Defilant 2', 'http://www.abciweb.net/PHOTO/ATV_44.jpg', 1),
('Defilant 1', 'abciweb-100.jpg', 0),
('Defilant 1', 'la_courte_echelle_100.jpg', 4),
('Defilant 1', 'persephone-100.jpg', 5),
('Defilant 2', 'http://www.abciweb.net/PHOTO/ATV_47.jpg', 3),
('Defilant 2', 'http://www.abciweb.net/PHOTO/ATV_82.jpg', 4),
('Defilant 2', 'http://www.abciweb.net/PHOTO/Atelier_vitrail_presentation.jpg', 0),
('Defilant 2', 'http://www.abciweb.net/PHOTO/ATV_78.jpg', 6);
 
 
Syntaxe: [ Télécharger ] [ Masquer ] [ Sélectionner ] [ Agrandir ]
Code sql
CREATE TABLE `defilant_images` (
  `Image` varchar(100) NOT NULL,
  `Largeur` smallint(5) UNSIGNED DEFAULT '0',
  `Hauteur` smallint(5) UNSIGNED DEFAULT '0',
  `Description` tinytext,
  `Lien` tinytext,
  PRIMARY KEY  (`Image`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
-- 
-- Contenu de la table `defilant_images`
-- 
 
INSERT INTO `defilant_images` (`Image`, `Largeur`, `Hauteur`, `Description`, `Lien`) VALUES
('amazigh-100.jpg', 71, 100, 'Camping Amazigh Azrou Maroc', 'http://www.campingamazigh.com/'),
('aned_mau-100.jpg', 123, 100, 'Gîte en tipis', ''),
('fonte-flamme-100.jpg', 110, 100, 'Fabricant importateur de chauffage au bois : poêles à bois, poêles à granulés, inserts fonte et acier, cheminées traditionnelles, cheminées métalliques, chaudières, cuisinières.', 'http://www.fonte-flamme.com/'),
('marpillat-100.jpg', 74, 100, 'Tailleur de pierre, maçonnerie pierre dans le puy de dôme.', 'http://www.ateliermarpillat.com/'),
('cerise_piano_100.jpg', 167, 100, 'Spectacle musical', NULL),
('infocritique-100.jpg', 113, 100, 'Info critique', 'http://avmr.free.fr/'),
('abciweb-100.jpg', 95, 100, 'Création de sites internet sur mesure Clermont-Ferrand Puy de Dôme 63.', 'http://www.abciweb.net/'),
('la_courte_echelle_100.jpg', 138, 100, 'Coaching, orientation, conseils pour particuliers et entreprises.', 'http://www.la-courte-echelle.com/'),
('persephone-100.jpg', 101, 100, 'Collectif d''artiste, spectacles multimédias, musique électroacoustique.', 'http://www.collectifodma.net/'),
('http://www.abciweb.net/PHOTO/Atelier_vitrail_presentation.jpg', 180, 237, 'Vitraux d''art sur mesure pour particuliers et monuments historiques.', 'http://mireilleribeyron.free.fr'),
('http://www.abciweb.net/PHOTO/ATV_45.jpg', 143, 237, 'Vitraux d''art sur mesure pour particuliers et monuments historiques.', 'http://mireilleribeyron.free.fr'),
('http://www.abciweb.net/PHOTO/ATV_47.jpg', 177, 237, 'Vitraux d''art sur mesure pour particuliers et monuments historiques.', 'http://mireilleribeyron.free.fr'),
('http://www.abciweb.net/PHOTO/ATV_82.jpg', 137, 237, 'Vitraux d''art sur mesure pour particuliers et monuments historiques.', 'http://mireilleribeyron.free.fr'),
('http://www.abciweb.net/PHOTO/ATV_78.jpg', 144, 237, 'Vitraux d''art sur mesure pour particuliers et monuments historiques.', 'http://mireilleribeyron.free.fr'),
('http://www.abciweb.net/PHOTO/ATV_44.jpg', 127, 237, 'Vitraux d''art sur mesure pour particuliers et monuments historiques.', 'http://mireilleribeyron.free.fr');

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr">
<title>Panoramique</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet-defilant.js"></script>
 
<script type="text/javascript">
<!--
//Nécessite script objet défilant version >= 2.0
 
 
// PARAMETRAGE du BLOC 1
// Chargement de la fonction avec ses paramètres
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant('div_images_defilant','auto','b','g','8','0','0','500')});
 
// Chargement automatique (facultatif mais recommandé) des images :
// Chargement des images du bloc ayant l'id "p_images" (avec des balises "span" pour inclure les images et "className" pour les identifier).
addLoad_DF_ObjetDefilant(function() {Select_Img_Preload('p_images','span','className')});
 
 
 
 
 
// PARAMETRAGE du BLOC 2
 
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant ('div_images_defilant2','auto','r','g','15','0','0','500')});
 
// - Chargement de la fonction DF_ObjetDefilant_Off avec comme paramètre l'id du div défilant (pour un démarrage manuel)
//addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant_Off ('div_images_defilant2')});
 
// Chargement des images du bloc ayant l'id "select_images" avec des balises "option" pour inclure les images et "value" pour les identifier (fonction désactivée puisque les images sont les mêmes que pour le premier bloc)
//addLoad_DF_ObjetDefilant(function() {Select_Img_Preload('select_images','option','value')});
 
 
 
 
//NE PAS MODIFIER le code ci-dessous
 
function Select_Img_Preload (id_select,tag,valeur)
{
 
   var id_select = document.getElementById(id_select);
 
   if (id_select)
       {
           var tab_image = new Array();
 
           var Select_image_preload = new Array();
 
           tab_image = id_select.getElementsByTagName(tag);
 
           for (var i=0; i < tab_image.length; i++)
               {    
                   switch (valeur)
                       {
                           case 'value' : val = tab_image[i].value;break;
                           case 'className' : val = tab_image[i].className;break;
                           case 'id' : val = tab_image[i].id;break;
                           case 'name' : val = tab_image[i].name;break;
 
                           default : alert('Attributs utilisés pour les images : "value" ou "className" ou "id" ou "name"\r\n (cf :  switch de la fonction "Select_Img_Preload ")');
                       }
 
                   Select_image_preload[val] = new Image();
                   Select_image_preload[val].src = val;
               }
       }
}
 
 
 
 
 
 
function Set_Image_Change(image_select, id_defilant, id_img_preload, temps_fondu, opacite_mini, mode)  
{
 
var Ob_id = document.getElementById(id_defilant);
if (typeof Ob_id == 'object' && typeof image_select == 'string')
   {    
       DF_ObjetDefilant_Off (id_defilant);// obd
 
       var image_nv = new Image();
       image_nv.src = image_select;
 
       var temps_fondu = typeof temps_fondu != 'undefined' && temps_fondu != '' ? parseInt(temps_fondu)/2 : 0 ;
       var opacite_mini = typeof opacite_mini != 'undefined' && opacite_mini != '' ? parseInt(opacite_mini) : 0 ;
 
 
       var image_preload = document.getElementById(id_img_preload);
       image_preload = typeof image_preload == 'object' ? image_preload : false;
 
       var tab_image = Ob_id.getElementsByTagName('img');
       var image_source = typeof tab_image[0] != 'undefined' ? tab_image[0].src : null;
 
       var Ob_st = Ob_id.style;
 
 
       function Objet_defilant()
       {
           // variable interne de la fonction DF_ObjetDefilant (pour réinitialiser les paramètres)
           this.DF_ObjetParam[id_defilant]['id_defile'] = undefined;
 
           // variable interne de la fonction DF_ObjetDefilant (appel de la fonction)
           this.DF_ObjetParam[id_defilant]['instance']();
 
           if (typeof mode != 'undefined' && mode != '') DF_ObjetDefilant_Off (id_defilant);
       }
 
 
       function Img_attribut ()
       {
           var largeur = image_nv.width;            
           var noeuds_nb = Ob_id.childNodes.length;
 
           for (var i = 0; i < noeuds_nb; i++) Ob_id.removeChild(Ob_id.firstChild);
 
           var element_img = document.createElement("img");
           element_img.setAttribute('src',image_select);
           element_img.setAttribute('width',largeur);
 
           Ob_st.width = largeur+'px';
           Ob_st.left = 0+'px';
 
           Ob_id.appendChild(element_img);
       }    
 
 
       function Increment_opacite()
       {
           var opac_ini = opacite_mini < 0 || opacite_mini > 100 ? 0 : opacite_mini;
 
           var nb_cycles = temps_fondu/10; // 10 = valeur setTimeout mini réalisable par les navigateurs
 
           var opacite_t = 100 - opac_ini;
 
           var incr_opac = nb_cycles != 0 ? opacite_t/nb_cycles : 0;
 
           // incr_opac = 0 si temps_fondu = 0 ou indéfini ou si opacite_mini = 100
           return incr_opac;
       }
 
 
       function Change_opac_Plus (incr_opac, Ob_id, opacite)
       {            
           Ob_st.opacity = (opacite / 100);
           Ob_st.MozOpacity = (opacite / 100);
           Ob_st.KhtmlOpacity = (opacite / 100);
           Ob_st.filter = "alpha(opacity=" + opacite + ")";
 
           opacite += incr_opac;
 
           if (opacite <= 100)
           {
               setTimeout(function(){Change_opac_Plus(incr_opac, Ob_id, opacite)}, 10);
           }
           else
           {
               Ob_st.filter = null; // obd indispensable pour ie 6 et défilement
 
               Objet_defilant(); // obd
           }
       }
 
 
       function Change_opac_Moins (incr_opac, Ob_id, opacite)
       {            
           Ob_st.opacity = (opacite / 100);
           Ob_st.MozOpacity = (opacite / 100);
           Ob_st.KhtmlOpacity = (opacite / 100);
           Ob_st.filter = "alpha(opacity=" + opacite + ")";
 
           opacite -= incr_opac;
 
           if (opacite >=  opacite_mini)
           {
               setTimeout(function(){Change_opac_Moins(incr_opac, Ob_id, opacite)}, 15);
           }
           else
           {
               Img_attribut ();
               Change_opac_Plus (incr_opac, Ob_id, opacite)
           }
       }
 
 
       function Img_change ()
       {
           if(image_preload) image_preload.style.visibility = 'hidden';
 
           var incr_opac = Increment_opacite();
 
           if (incr_opac != 0)
               {
                   if (temps_fondu > 0 && image_source != null)
                       {
                           Change_opac_Moins (incr_opac, Ob_id, 100);            
                       }    
                       else
                       {
                           Img_attribut();
                           Change_opac_Plus (incr_opac, Ob_id, opacite_mini);
                       }
               }
               else
               {
                   Img_attribut();
                   Objet_defilant(); // obd
               }        
       }
 
 
       function Img_Complete ()
       {        
           if(image_nv.complete == true)
               {    
                   Img_change ();                
               }
               else                
               {
                   setTimeout(function(){Img_Complete()},250);
               }
       }
 
 
       if(image_nv.complete != true)    
           {
               if(image_preload) image_preload.style.visibility = 'visible';
 
               Img_Complete ();
           }
       else
           {
               Img_change ();
           }
 
   }    
}
 
// Fin du code à ne pas modifier
 
 
 
// Fonction spécifique pour simplement éviter d'avoir à déclarer la fonction Set_Image_Change et l'ensemble de ses paramètres dans l'évènement onclick des balises span du bloc <p id = "p_images">
function Set_Image_Change_param (image_select)
{
   Set_Image_Change(image_select,'div_images_defilant','gif_anime_chargement',250,50);
}
 
-->
</script>
 
 
<style type="text/css">
<!--
#cadre_images {
   position: relative;
   background: #000;
   border: 20px solid  #000;
   border-bottom:30px solid  #000;
   width:600px;
   height:480px;
   margin: 2em auto 0 auto;
   overflow: hidden;
   z-index:5;
}
 
 
#p_images {
   display:inline;
}
 
 
#p_images span {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   color:#FFF;
   cursor:pointer;
   margin-left:5px;
}
 
 
#cadre_images2 {
   position: relative;
   background:#fff;
   border: 20px solid  #000;
   border-bottom:30px solid  #000;
   width:600px;
   height:480px;
   margin: 2em auto 0 auto;
   overflow: hidden;
   z-index:5;
}
 
 
#select_images {
   height:21px;
   background: #F0C000;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
}
 
#conteneur_defil, #conteneur_defil2 {
   position : relative;
   visibility:hidden;
   overflow : hidden;
   height:100%;
}
-->
</style>
</head>
 
<body>
 
<div id = "bloc1">
 
    <div id="cadre_images">
        <div id = "conteneur_defil">
                <div id="div_images_defilant" onmouseover = "DF_ObjetDefilant_Off('div_images_defilant')">
 
                <img src = "http://www.abciweb.net/PHOTO/panorama_002.jpg"  alt = "source image : http://badplayer.free.fr/" title = "source image : http://badplayer.free.fr/" />
 
                </div>
        </div>        
    </div>
 
 
    <div  style="position:relative;width:600px;margin:auto;z-index:10;top:-30px;">    
 
        <p id = "p_images">
        <span class="http://www.abciweb.net/PHOTO/panorama_002.jpg" onclick = "Set_Image_Change_param(this.className)">1</span>
        <span class="http://www.abciweb.net/PHOTO/panorama_001.jpg" onclick ="Set_Image_Change_param(this.className)">2</span>
        <span class="http://www.abciweb.net/PHOTO/panorama_004.jpg" onclick = "Set_Image_Change_param(this.className)">3</span>
        <span class="http://www.abciweb.net/PHOTO/panoramiques_008_exp.jpg" onclick = "Set_Image_Change_param(this.className)">4</span>
        </p>
 
        <img id= "gif_anime_chargement" src="http://www.abciweb.net/graphiques/attente.gif"  width="21" height="21" alt="Chargement des images" style="visibility:hidden;margin-left:10px;"  />
 
        <img onmouseover = "DF_ObjetDefilant_On('div_images_defilant')" onclick = "DF_ObjetDefilant_On_Inverse('div_images_defilant')"  style = "position:absolute;right:280px;top:6px;cursor:pointer;" src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
 
    </div>
 
</div>
 
 
 
 
<div id = "bloc2">
 
    <div id="cadre_images2">
        <div id = "conteneur_defil2">
                <div id="div_images_defilant2">
 
                    <img src="http://www.abciweb.net/PHOTO/panorama_001.jpg"  alt="source image : http://badplayer.free.fr/" title="source image : http://badplayer.free.fr/" />
 
                </div>
        </div>
    </div>
 
 
    <div  style="position:relative;width:600px;margin:auto;z-index:10;top:-30px;">
 
        <select id = "select_images" name = "select_images" onchange = "Set_Image_Change(this.value,'div_images_defilant2','gif_anime_chargement2', 400, 0,'manuel')" >
        <option value = "http://www.abciweb.net/PHOTO/panorama_001.jpg">Image1</option>
        <option value = "http://www.abciweb.net/PHOTO/panorama_002.jpg">Image2</option>
        <option value = "http://www.abciweb.net/PHOTO/panoramiques_008_exp.jpg">Image3</option>
        <option value = "http://www.abciweb.net/PHOTO/panorama_004.jpg">Image4</option>
        </select>
 
        <img id= "gif_anime_chargement2" src="http://www.abciweb.net/graphiques/attente.gif"  width="21" height="21" alt="Chargement des images" style="visibility:hidden;margin-left:10px;"  />
 
        <img onclick = "DF_ObjetDefilant_On_Inverse('div_images_defilant2')" onmouseout = "DF_ObjetDefilant_Off('div_images_defilant2')" style = "position:absolute;right:280px;top:6px;cursor:pointer;" src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
 
    </div>
 
</div>
 
 
</body>
</html>

06/10/2010, 10h39
ideal23
je pense que la modification pour bloquer le défilement aux bords gauche et droit de l'image se trouve à cet endroit:
Code:

1 2 3 4 function Deroulement() { X += Y / D * 100; document.getElementById("Diapo360").style.backgroundPosition = X + "px"; }
mais je ne trouve pas la fonction adéquat.
Avez-vous une idée? Merci
06/10/2010, 23h34
ABCIWEB

Avec un exemple comprenant deux de tes images on pourrait faire CELA
Bon bien entendu tu pourrais reprendre le même background pour la présentation.

Il suffit de compléter les options du menu select pour ajouter d'autres images (qui peuvent avoir des largeurs différentes mais qui devraient avoir la même hauteur).

Je te donnerai plus d'infos si ça t'intéresse.
07/10/2010, 13h40
ideal23

ABCIWEB merci encore, c'est très sympa de ta part. j'essaye moi-même de rendre service selon mes compétences. Mais sur le sujet qui me concerne, je débute vraiment.
Ton travail m'intéresse, c'est ce que je recherchais. je vais étudier le script pour l'adapter. Je te tiens au courant. Merci de ta disponibilité

Bon alors je recopie de code source qui pourra peut-être servir à d'autres...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panoramique</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet_defilant.js"></script>
 
<script type="text/javascript">
<!--
addLoad_DF_ObjetDefilant(function(){Select_Img_Preload('select_images')});
 
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('div_images_defilant','auto','r','g','10','0','0','500')});
 
 
 
function Select_Img_Preload (id_select)
{
	var id_select = document.getElementById(id_select);
 
	var tab_image = new Array();
 
	this.Select_image_preload = new Array();
 
	tab_image = id_select.getElementsByTagName('option');
 
	for (var i=0; i < tab_image.length; i++)
		{
			this.Select_image_preload[tab_image[i].value] = new Image();
			this.Select_image_preload[tab_image[i].value].src = tab_image[i].value;
		}
 
	function Verif_load_img() 
		{
			   var all_ok = true;
 
			   for (var cle in this.Select_image_preload)
				if(this.Select_image_preload[cle].complete != true) all_ok = false;
 
			   if(all_ok)
				id_select.style.visibility = 'visible';
				else
				setTimeout(function(){Verif_load_img()},250);
 
		}
 
	Verif_load_img();
}
 
 
 
 
function Get_Select(image_select,id_image_defilant,id_div_defilant)  
{
	var id_select = document.getElementById(id_image_defilant);
 
	DF_ObjetNavigMous(id_div_defilant,'over');
 
	this.DF_ObjetParam[id_div_defilant] = new Array();
 
	var largeur = this.Select_image_preload[image_select].width;
 
	id_select.width = largeur;
	id_select.src = image_select;
 
	DF_ObjetDefilant(id_div_defilant,largeur,'r','g','10','0','0','500');
}
 
-->
</script>
 
 
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	border: 20px solid  #CCCCCC;
	border-bottom:50px solid #CCCCCC;
	width:450px; 
	height:220px;
	margin: 2em auto 0 auto;
	overflow: hidden;
	z-index:5;
}
 
-->
</style>
</head>
 
<body>
 
 <div id="cadre_images">
  		<div id="div_images_defilant"  onmouseover = "DF_ObjetNavigMous('div_images_defilant','over')"  onmouseout = "DF_ObjetNavigMous('div_images_defilant','out')"><img id = "image_change" src="http://galaxyweb.free.fr/diaporama360/photos/stockholm1.jpg" width="1239" /></div>
 </div>
 
 
<div  style="position:relative;width:400px;margin:auto; cursor:pointer;z-index:10;top:-30px">
<select id = "select_images" name = "select_images" onchange = "Get_Select(this.value,'image_change','div_images_defilant')" style="visibility:hidden">
<option value = "http://galaxyweb.free.fr/diaporama360/photos/stockholm1.jpg">Image1</option>
<option value = "http://galaxyweb.free.fr/diaporama360/photos/stockholm.jpg">Image2</option>
</select>
 
<img onclick = "DF_ObjetSensInverse('div_images_defilant')" style = "margin-left:110px" src="http://www.abciweb.net/images_nav/fleche-double-sens.png" width="25" height="15"  alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>
 
</body>
</html>

La première chose à faire est d'être indépendant des liens vers mon site.

La source de la ligne : <script type="text/javascript" src="http://www.abciweb.net/Scripts/objet_defilant.js"></script>
doit donc être remplacée par un fichier interne que voici:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
// Objets défilants A. Bontemps, abciweb.net Version 2.1
function DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)
{
   this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;   
   this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];   
 
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') {Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause);}
   else
   if (this.DF_ObjetParam[id]['dim_defilant'] > 0)
   {
      if (this.DF_ObjetParam[id]['mode'] == 'r') {Boucle_ar(id);} else {Boucle_cont(id);}
 
      this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);   
   }
 
 
 
   function Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause)
   {   
      var id_d = null;
      var id_c = null;
      var id_cc = null;
 
 
      if(!(id_d = document.getElementById(id))) {id_d = null;} else if(!(id_c = id_d.parentNode)) {id_c = null;}
      else if(!(id_cc = id_c.parentNode)) {id_cc = null;};
 
      if(id_c != null && id_cc != null && id_d != null)
      {
      function is_all_ws ( nod )
         {
           // Use ECMA-262 Edition 3 String and RegExp features
           return !(/[^\t\n\r ]/.test(nod.data));
         }
 
 
      function is_ignorable ( nod )
         {
           return (nod.nodeType == 8) || // A comment node
                ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
         }
 
 
      function trim_debut (myString)
         {
            return myString.replace(/^\s+/g,'')
         }
 
 
      function trim_fin (myString)
         {
            return myString.replace(/\s+$/g,'')
         }
 
 
      // Nettoyage mise en page html Mozilla Chrome...
      if (id_d != null)
         {
            while (id_d.hasChildNodes() && is_ignorable(id_d.lastChild)) {id_d.removeChild(id_d.lastChild);}
            while (id_d.hasChildNodes() && is_ignorable(id_d.firstChild)) {id_d.removeChild(id_d.firstChild);}
         }   
      }
 
      if(id_c != null && id_cc != null && id_d != null && id_d.hasChildNodes())
         {
            this.DF_ObjetParam[id]['instance'] = typeof this.DF_ObjetParam[id]['instance'] == 'undefined' ? function () {DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause);} : this.DF_ObjetParam[id]['instance'];
 
            this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd' || sens == 'h' || sens == 'b') ? sens : 'g';
 
            this.DF_ObjetParam[id]['sens_horizontal'] = this.DF_ObjetParam[id]['sens_ini'] == 'g' || this.DF_ObjetParam[id]['sens_ini'] == 'd' ? true : false;   
 
            id_cc.style.overflow = "hidden";
 
            id_c.style.visibility = "hidden";
            id_c.style.position = "relative";
            id_c.style.overflow = "hidden";
 
 
            id_d.style.position = "absolute";
            id_d.style.width = "auto";
            id_d.style.height = "auto";
 
 
            // Nettoyage espaces vides en début de défilant pour le mode horizontal
            var elem = id_d.firstChild;   
 
            if (elem.nodeType == 3 && this.DF_ObjetParam[id]['sens_horizontal'])
               {
                  var noeud_debut = document.createTextNode(trim_debut(elem.nodeValue));
                  id_d.replaceChild(noeud_debut, id_d.firstChild);
               }
 
            // Nettoyage espaces vides en fin de défilant
            elem = id_d.lastChild;   
 
            if (elem.nodeType == 3)
               {
                  var noeud_fin = document.createTextNode(trim_fin(elem.nodeValue));
                  id_d.replaceChild(noeud_fin, id_d.lastChild);
               }
 
 
            var div_defile = id_d.cloneNode(true);
 
            var espace_insecable = document.createTextNode("\u00a0");
 
            // Ajoute un espace insécable "\u00a0" si 'BR' est en fin de défilant pour le mode vertical (pour ie)
            if(!this.DF_ObjetParam[id]['sens_horizontal'] && div_defile.lastChild.nodeName == 'BR')
            {
               div_defile.appendChild(espace_insecable);
            }
 
 
            var c = document.createElement("div");
            c.style.height = "100%";
 
            var nb_noeud = id_c.childNodes.length;
 
 
            // Dimensions du cadre
            for (var i = 0; i < nb_noeud ; i++) {id_c.removeChild(id_c.firstChild);}
            id_c.appendChild(c);
 
            this.DF_ObjetParam[id]['hauteur_cadre'] = c.offsetHeight;
            this.DF_ObjetParam[id]['largeur_cadre'] = c.offsetWidth;
            id_c.removeChild(id_c.firstChild);
            id_c.appendChild(div_defile);         
 
            this.DF_ObjetParam[id]['id_defile'] = document.getElementById(id);
 
 
            // Dimensions du défilant   
            var id_dim = typeof id_dim == 'undefined' || trim_debut(id_dim) == '' || id_dim == 'auto' ? 'auto' :  parseInt(id_dim);
 
            if(this.DF_ObjetParam[id]['sens_horizontal'])
               {
                  this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_cadre']+'px';
 
                  this.DF_ObjetParam[id]['largeur_def'] = id_dim == 'auto' ? undefined : id_dim;
 
                  if (typeof this.DF_ObjetParam[id]['largeur_def'] == 'undefined')
                  {
                     id_c.style.width = '1000000px';//largeur maxi de calcul
 
                     this.DF_ObjetParam[id]['largeur_def'] = this.DF_ObjetParam[id]['id_defile'].offsetWidth;
 
                     id_c.style.width = 'auto';
                  }
 
                  this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';
 
               }
               else
               {
                  this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_cadre']+'px';
 
                  this.DF_ObjetParam[id]['hauteur_def'] = id_dim == 'auto' ? this.DF_ObjetParam[id]['id_defile'].offsetHeight : id_dim;
 
                  this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_def']+'px';
               }
 
 
 
            this.DF_ObjetParam[id]['dim_cadre'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_cadre'] : this.DF_ObjetParam[id]['hauteur_cadre'];
 
            this.DF_ObjetParam[id]['dim_defilant'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['hauteur_def'];
 
 
            this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
            this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
            this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
            this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;      
 
            this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
            this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 || this.DF_ObjetParam[id]['mode'] == 'r' ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['dim_cadre']/100);
 
 
            this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['dim_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['dim_cadre']/100);      
 
 
            this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['dim_cadre'] > this.DF_ObjetParam[id]['dim_defilant'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['dim_cadre'] - this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['psinit'];
 
 
            this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
            this.DF_ObjetParam[id]['sens'] = 1;
 
            this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['dim_defilant'] >= this.DF_ObjetParam[id]['dim_cadre'] ? this.DF_ObjetParam[id]['dim_defilant'] - this.DF_ObjetParam[id]['dim_cadre'] : 0;
 
            this.DF_ObjetParam[id]['dim_defilant'] += this.DF_ObjetParam[id]['b_esp'];                                          
 
            this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['p_retour'];
 
 
            if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['dim_defilant'] == this.DF_ObjetParam[id]['dim_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) {this.DF_ObjetParam[id]['dim_defilant'] = 0;}
 
            if (this.DF_ObjetParam[id]['dim_defilant'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') {Ajout_clone(id);}
 
 
            id_cc.style.overflow = "visible";
            id_c.style.visibility = "visible";   
 
 
            this.DF_ObjetParam[id]['instance']();   
      }
   }
 
 
 
   function Ajout_clone(id)
   {         
      var div_contenu = document.createElement("div");
 
      var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
      for (var i = 0; i < nb_noeud ; i++)
         {               
            div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
            this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
         }
 
      if (this.DF_ObjetParam[id]['b_esp'] > 0)
      {
         if (this.DF_ObjetParam[id]['sens_horizontal'])
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.marginRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginLeft = this.DF_ObjetParam[id]['b_esp']+'px';      
            }
            else
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'h' ? div_contenu.style.marginBottom = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginTop = this.DF_ObjetParam[id]['b_esp']+'px';               
            }
      }
 
      if (this.DF_ObjetParam[id]['sens_horizontal']) {div_contenu.style.display = "inline";};               
 
      this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
      var nb_clone = Math.ceil(this.DF_ObjetParam[id]['dim_cadre']/(this.DF_ObjetParam[id]['dim_defilant']));
 
      if (this.DF_ObjetParam[id]['sens_horizontal'])
         {
            this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
         }
         else
         {
            this.DF_ObjetParam[id]['id_defile'].style.height = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
         }
 
      for (var j = 0; j < nb_clone ; j++)
         {
            this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));   
         }
   }
 
 
 
   function Boucle_cont(id)
   {
      this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
      this.DF_ObjetParam[id]['inverse'] = 1;
 
      if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])   
            {               
               this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true)); 
               this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
 
               this.DF_ObjetParam[id]['inverse'] = -1;      
               this.DF_ObjetParam[id]['pscrnt'] = 0;
               this.DF_ObjetParam[id]['sens'] = -1;      
            }      
            else
            {
               if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
                  {
                     this.DF_ObjetParam[id]['sens'] *= -1;
                     this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
                  }
            }
 
         if (this.DF_ObjetParam[id]['sens_horizontal'])
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
            }
            else
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
            }
 
         this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
   }
 
 
 
   function Boucle_ar (id)
   {
      this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
      this.DF_ObjetParam[id]['inverse'] = 1;
 
      if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
         {
            this.DF_ObjetParam[id]['inverse'] = -1;
            this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
            this.DF_ObjetParam[id]['sens'] *= -1;
         }
 
      if (this.DF_ObjetParam[id]['sens_horizontal'])
         {      
            this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
         }
         else
         {
            this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
         }
 
      this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
   }
 
}
 
 
 
function DF_ObjetNavigMous(id,etat,nb)
{
   var nb = typeof nb == 'undefined'? 0 :  nb + 1;
 
   if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['instance'] != 'undefined' && typeof this.DF_ObjetParam[id]['Timer'] == 'number')
      {
         clearTimeout(this.DF_ObjetParam[id]['Timer']);
         this.DF_ObjetParam[id]['Timer'] = 0;
         if (etat == 'out') this.DF_ObjetParam[id]['instance']();
      }
      else if (nb < 30)//pour ancien navigateur avec chargement onload de DF_ObjetDefilant_Off(id)
      {
         setTimeout(function(){DF_ObjetNavigMous(id,etat,nb)},15);
      }
}
 
 
 
function DF_ObjetSensInverse (id)
{
   if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit']))
      {
         this.DF_ObjetParam[id]['sens'] *= -1;
      }
}
 
 
 
function DF_ObjetDefilant_On (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' && typeof this.DF_ObjetParam[id]['instance'] != 'undefined')
      {
         this.DF_ObjetParam[id]['instance']();   
      }
      else
      {
         DF_ObjetNavigMous(id,'out');
      }
}
 
 
 
function DF_ObjetDefilant_Off (id)
{
   DF_ObjetNavigMous(id,'over');
}
 
 
 
function DF_ObjetDefilant_On_Off (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
      {
         DF_ObjetDefilant_On (id);
      }
      else
      {
         DF_ObjetNavigMous(id,'over');
      }
}
 
 
 
function DF_ObjetDefilant_On_Inverse (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
      {
         DF_ObjetDefilant_On (id);
      }
      else
      {
         DF_ObjetSensInverse (id);
      }
}
 
 
 
function DF_ObjetDefilant_Inverse (id)
{
   if(typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] > 0)
      {
         DF_ObjetSensInverse (id);
      }
}
 
 
 
function addLoad_DF_ObjetDefilant(func)
{
   if (window.addEventListener)
      {
         window.addEventListener("load", func, false);
      }
   else if (document.addEventListener)
      {
         document.addEventListener("load", func, false);
      }
   else if (window.attachEvent)
      {
         window.attachEvent("onload", func);
      }
}

Reste ensuite à remplacer l'image du bouton de navigation "aller-retour" (<img onclick... en fin de code).

Concernant le fonctionnement du code ci-dessus, il suffit de rentrer l'adresse des images comme valeur dans les balises <option>.

Il est recommandé d'indiquer la largeur de la première image "<img id = "image_change.... />". Cette première image est la seule qui s'affichera si javascript est désactivé.

Pour info,

- Les fonctions addLoad_DF_ObjetDefilant appellent des fonctions "Select_Img_Preload" et "DF_ObjetDefilant" au chargement de la page.

- La fonction Select_Img_Preload récupère les valeurs des balises "option", puis charge les images, puis affiche le bouton de sélection lorsque les images sont entièrement chargées (on pourrait mettre un gif animé de chargement en attente si vous avez beaucoup d'images). Cela permet d'assurer un accès immédiat au images suivantes et un bon fonctionnement de la fonction de défilement.

- La fonction Get_Select fait appel à la fonction de défilement pour arrêter le timer, puis efface les données précédentes, puis détermine la largeur de la nouvelle image, transmet cette largeur, puis change la source de l'image et enfin transmet la largeur à la fonction de défilement.

07/10/2010, 19h58
ideal23

j'ai adapté le script sur mon site en local, ca marche impec.
07/10/2010, 22h20
ABCIWEB

Ah oui au passage, au cas où tu aurais des panoramiques à 360° tu voudrais certainement faire une boucle continue plutôt qu'un aller-retour.

Dans ce cas, il y aurait juste à modifier un paramètre dans les deux appels à la fonction "DF_ObjetDefilant". Le 'r' signifiant "aller-retour", il suffit de le remplacer par la lettre "b" qui signifie "boucle" ;)

(c'est détaillé dans le mode de fonctionnement du lien plus haut) :)
08/10/2010, 15h57
ideal23

Merci de ces précisions
Je te sollicite encore, à quel endroit du script peut-on modifier la vitesse du défilement, je le trouve un peu lent.
Merci encore
09/10/2010, 21h20
ABCIWEB

Les paramètres sont indiqués ici:

Citation:

Dans l'exemple suivant, le paramétrage et le chargement de la fonction "DF_ObjetDefilant" se fait dans le second bloc javascript à la ligne :
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)});

DETAIL DES PARAMETRES DE LA FONCTION
DF_ObjetDefilant(id, id_dim, mode, sens, vit, pos, b_esp, pause)

Le premier paramètre de la fonction DF_ObjetDefilant - l'id du div défilant - doit être obligatoirement renseigné (les autres paramètres possèdent des valeurs par défaut).

id = ID de l'objet défilant (et non pas du cadre).

id_dim = Cette valeur peut être non renseignée, ou laissée vide, ou paramétrée sur 'auto', uniquement si le code html inclus dans le div défilant mentionne les dimensions (largeur + hauteur) des éventuelles images.
Si vous ne mentionnez pas la dimension des images à l'intérieur du div défilant, indiquez pour ce paramètre : la largeur totale (en pixels) du div défilant pour un défilement horizontal, ou la hauteur totale du div défilant pour un défilement vertical.
('auto' par défaut)

mode = 'b' pour boucle continue, 'r' pour aller-retour, ('b' par défaut)

sens = 'g' pour défilement de droite à gauche, 'd' pour l'inverse, 'h' pour défilement de bas en haut, 'b' pour l'inverse ('g' par défaut)

vit = vitesse de l'objet défilant entre 7 et environ 50 (ou plus si besoin). Les valeurs les plus petites sont les plus rapides. (20 par défaut)

pos = position initiale de départ en pourcentage par rapport à la largeur du cadre.
A noter que lorsque la largeur du cadre est supérieure à la largeur de l'objet défilant - et uniquement dans ce cas - la valeur 0 est utilisée pour calculer la position qui permet de caler la fin de l'objet défilant sur le bord du cadre afin qu'il soit visible en totalité avant le mouvement. (0 par défaut)

b_esp = espacement en pourcentage par rapport à la largeur du cadre entre deux boucles pour les boucles continues. N'a pas d'incidence pour le mode aller-retour. (0 par défaut)

pause = pause en millisecondes avant le départ automatique de l'objet défilant. Ce paramètre est également pris en compte pour le retour dans le mode aller-retour. (0 par défaut)

Notes :

- Vous disposez des fonctions "DF_ObjetDefilant_On", "DF_ObjetDefilant_Off", "DF_ObjetDefilant_On_Off", "DF_ObjetDefilant_On_Inverse" et "DF_ObjetDefilant_Inverse" pour contrôler le défilement avec les évènements de votre choix (onclick, mouseover, onmouseout...). Toutes ces fonctions prennent comme paramètre l'id du bloc défilant ex :
mouseover = "DF_ObjetDefilant_Off('id_defilant')".

- Vous pouvez faire défiler plusieurs objets défilants dans une même page.

- Les paramètres exprimés en pourcentages - "pos" et "b_esp" - supportent les valeurs décimales avec le point comme séparateur.

- Le CSS du conteneur du bloc défilant est invariant mais doit être présent (cf exemple ci-dessous). Par ailleurs, ne pas paramétrer des styles de positionnement et de largeur sur le DIV de l'objet défilant. Renseignez ces paramètres dans le cadre de l'objet défilant.

- Pour compatibilité avec IE6 (et peut-être certains autres navigateurs) aucun id de votre page ne doit se nommer DF_ObjetParam

- Les risques de collision avec d'autres scripts sont peu probables puisqu'ils sont limités aux noms des fonctions "DF_ObjetDefilant", "DF_ObjetNavigMous", "DF_ObjetSensInverse", "DF_ObjetDefilant_On", "DF_ObjetDefilant_Off", "DF_ObjetDefilant_On_Off", "DF_ObjetDefilant_On_Inverse", "DF_ObjetDefilant_Inverse", "addLoad_DF_ObjetDefilant" et à celui de la variable globale "DF_ObjetParam".

- Fonction compatible XHTML 1.1 et CSS 2.1

C'est donc le paramètre qui suit le 'g' (qui lui-même indique le sens de défilement dans ce cas vers la gauche). Dans l'appel aux fonctions "DF_ObjetDefilant" il est dans cet exemple à 10, essayes de le mettre à 7. En dessous de 7 cela ne vas pas (pour l'instant) plus vite, c'est les limites des navigateurs. Pour aller encore plus vite il faudrait faire des pas de deux pixels mais dans ce cas cela ferait un défilement saccadé (pas joli à mon goût) et donc je n'ai pas prévu cette option.
10/10/2010, 15h07
ideal23

Merci encore de ta participation à mon problème et de ta disponibilité.

Je ré ouvre cet ancien topic car un peu plus haut je dis qu'il suffit de mettre "b" comme paramètre de la fonction défilante pour faire une boucle continue (pour les panoramiques 360°), mais après vérification c'est incompatible avec la dernière fonction "Get_Select" que j'avais faite pour changer l'image.

J'ai donc remplacé la fonction "Get_Select" par une autre nommée "Set_Image_Change" et par la même occasion j'en ai profité pour ajouter un fondu facultatif et paramétrable entre les différentes images.

Le code complet avec deux exemples différemment paramétrés est ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr">
<title>Panoramique</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet_defilant.js"></script>
 
<script type="text/javascript">
<!--
//Nécessite script objet défilant version >= 1.3
 
 
// PARAMETRAGE du BLOC 1
// Chargement de la fonction avec ses paramètres
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant('div_images_defilant','auto','b','g','8','0','0','500')});
 
// Chargement automatique (facultatif mais recommandé) des images :
// Chargement des images du bloc ayant l'id "p_images" (avec des balises "span" pour inclure les images et "className" pour les identifier). 
addLoad_DF_ObjetDefilant(function() {Select_Img_Preload('p_images','span','className')});
 
 
 
 
 
// PARAMETRAGE du BLOC 2
 
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant ('div_images_defilant2','auto','r','g','15','0','0','500')});
 
// - Chargement de la fonction DF_ObjetDefilant_Off avec comme paramètre l'id du div défilant (pour un démarrage manuel)
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant_Off ('div_images_defilant2')});
 
// Chargement des images du bloc ayant l'id "select_images" avec des balises "option" pour inclure les images et "value" pour les identifier (fonction désactivée puisque les images sont les mêmes que pour le premier bloc)
//addLoad_DF_ObjetDefilant(function() {Select_Img_Preload('select_images','option','value')});
 
 
 
 
//NE PAS MODIFIER le code ci-dessous 
 
function Select_Img_Preload (id_select,tag,valeur)
{
 
	var id_select = document.getElementById(id_select);
 
	if (id_select)
		{
			var tab_image = new Array();
 
			var Select_image_preload = new Array();
 
			tab_image = id_select.getElementsByTagName(tag);
 
			for (var i=0; i < tab_image.length; i++)
				{	
					switch (valeur)
						{
							case 'value' : val = tab_image[i].value;break;
							case 'className' : val = tab_image[i].className;break;
							case 'id' : val = tab_image[i].id;break;
							case 'name' : val = tab_image[i].name;break;
 
							default : alert('Attributs utilisés pour les images : "value" ou "className" ou "id" ou "name"\r\n (cf :  switch de la fonction "Select_Img_Preload ")');
						}
 
					Select_image_preload[val] = new Image();
					Select_image_preload[val].src = val;
				}
		}
}
 
 
 
 
 
 
function Set_Image_Change(image_select, id_defilant, id_img_preload, temps_fondu, opacite_mini, mode)  
{
 
var Ob_id = document.getElementById(id_defilant);
if (typeof Ob_id == 'object' && typeof image_select == 'string')
	{	
		DF_ObjetDefilant_Off (id_defilant);// obd
 
		var image_nv = new Image();
		image_nv.src = image_select;
 
		var temps_fondu = typeof temps_fondu != 'undefined' && temps_fondu != '' ? parseInt(temps_fondu)/2 : 0 ;
		var opacite_mini = typeof opacite_mini != 'undefined' && opacite_mini != '' ? parseInt(opacite_mini) : 0 ;
 
 
		var image_preload = document.getElementById(id_img_preload);
		image_preload = typeof image_preload == 'object' ? image_preload : false;
 
		var tab_image = Ob_id.getElementsByTagName('img');
		var image_source = typeof tab_image[0] != 'undefined' ? tab_image[0].src : null;
 
		var Ob_st = Ob_id.style;
 
 
		function Objet_defilant()
		{
			// variable interne de la fonction DF_ObjetDefilant (pour réinitialiser les paramètres) 
			this.DF_ObjetParam[id_defilant]['id_defile'] = undefined;
 
			// variable interne de la fonction DF_ObjetDefilant (appel de la fonction)
			this.DF_ObjetParam[id_defilant]['instance']();
 
			if (typeof mode != 'undefined' && mode != '') DF_ObjetDefilant_Off (id_defilant);
		}
 
 
		function Img_attribut ()
		{
			var largeur = image_nv.width;			
			var noeuds_nb = Ob_id.childNodes.length;
 
			for (var i = 0; i < noeuds_nb; i++) Ob_id.removeChild(Ob_id.firstChild);
 
			var element_img = document.createElement("img");
			element_img.setAttribute('src',image_select);
			element_img.setAttribute('width',largeur);
 
			Ob_st.width = largeur+'px';
			Ob_st.left = 0+'px';
 
			Ob_id.appendChild(element_img);
		}	
 
 
		function Increment_opacite()
		{
			var opac_ini = opacite_mini < 0 || opacite_mini > 100 ? 0 : opacite_mini;
 
			var nb_cycles = temps_fondu/10; // 10 = valeur setTimeout mini réalisable par les navigateurs
 
			var opacite_t = 100 - opac_ini;
 
			var incr_opac = nb_cycles != 0 ? opacite_t/nb_cycles : 0;
 
			// incr_opac = 0 si temps_fondu = 0 ou indéfini ou si opacite_mini = 100
			return incr_opac;
		}
 
 
		function Change_opac_Plus (incr_opac, Ob_id, opacite)
		{			
			Ob_st.opacity = (opacite / 100);
			Ob_st.MozOpacity = (opacite / 100);
			Ob_st.KhtmlOpacity = (opacite / 100);
			Ob_st.filter = "alpha(opacity=" + opacite + ")";
 
			opacite += incr_opac;
 
			if (opacite <= 100) 
			{
				setTimeout(function(){Change_opac_Plus(incr_opac, Ob_id, opacite)}, 10);
			}
			else
			{
				Ob_st.filter = null; // obd indispensable pour ie 6 et défilement
 
				Objet_defilant(); // obd
			}
		}
 
 
		function Change_opac_Moins (incr_opac, Ob_id, opacite)
		{			
			Ob_st.opacity = (opacite / 100);
			Ob_st.MozOpacity = (opacite / 100);
			Ob_st.KhtmlOpacity = (opacite / 100);
			Ob_st.filter = "alpha(opacity=" + opacite + ")";
 
			opacite -= incr_opac;
 
			if (opacite >=  opacite_mini) 
			{
				setTimeout(function(){Change_opac_Moins(incr_opac, Ob_id, opacite)}, 15);
			}
			else
			{
				Img_attribut ();
				Change_opac_Plus (incr_opac, Ob_id, opacite)
			}
		}
 
 
		function Img_change ()
		{
			if(image_preload) image_preload.style.visibility = 'hidden';
 
			var incr_opac = Increment_opacite();
 
			if (incr_opac != 0)
				{
					if (temps_fondu > 0 && image_source != null)
						{
							Change_opac_Moins (incr_opac, Ob_id, 100);			
						}	
						else
						{
							Img_attribut();
							Change_opac_Plus (incr_opac, Ob_id, opacite_mini);
						}
				}
				else
				{
					Img_attribut();
					Objet_defilant(); // obd
				}		
		}
 
 
		function Img_Complete ()
		{		
			if(image_nv.complete == true) 
				{	
					Img_change ();				
				}
				else				
				{
					setTimeout(function(){Img_Complete()},250);
				}
		}
 
 
		if(image_nv.complete != true) 	
			{
				if(image_preload) image_preload.style.visibility = 'visible';
 
				Img_Complete ();
			}
		else
			{
				Img_change ();
			}
 
	}	
}
 
// Fin du code à ne pas modifier
 
 
 
// Fonction spécifique pour simplement éviter d'avoir à déclarer la fonction Set_Image_Change et l'ensemble de ses paramètres dans l'évènement onclick des balises span du bloc <p id = "p_images">
function Set_Image_Change_param (image_select)
{
	Set_Image_Change(image_select,'div_images_defilant','gif_anime_chargement',250,50);
}
 
-->
</script>
 
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	background: #000;
	border: 20px solid  #000;
	border-bottom:30px solid  #000;
	width:600px; 
	height:480px;
	margin: 2em auto 0 auto;
	overflow: hidden;
	z-index:5;
}
 
 
#p_images {
	display:inline;
}
 
 
#p_images span {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	cursor:pointer;
	margin-left:5px;
}
 
 
#cadre_images2 { 
	position: relative;
	background:#fff;
	border: 20px solid  #000;
	border-bottom:30px solid  #000;
	width:600px; 
	height:480px;
	margin: 2em auto 0 auto;
	overflow: hidden;
	z-index:5;
}
 
 
#select_images {
	height:21px; 
	background: #F0C000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
 
-->
</style>
</head>
 
<body>
 
<div id = "bloc1">
 
	<div id="cadre_images">
 
			<!-- ne pas insérer de retour ligne ni d'espace entre la balise div ci-dessous et la balise img-->
			<div id="div_images_defilant" onmouseover = "DF_ObjetDefilant_Off('div_images_defilant')"><img src = "http://www.abciweb.net/PHOTO/panorama_002.jpg"  alt = "source image : http://badplayer.free.fr/" title = "source image : http://badplayer.free.fr/" /></div>
 
	</div>
 
 
	<div  style="position:relative;width:600px;margin:auto;z-index:10;top:-30px;">	
 
		<p id = "p_images">
		<span class="http://www.abciweb.net/PHOTO/panorama_002.jpg" onclick = "Set_Image_Change_param(this.className)">1</span>
		<span class="http://www.abciweb.net/PHOTO/panorama_001.jpg" onclick ="Set_Image_Change_param(this.className)">2</span>
		<span class="http://www.abciweb.net/PHOTO/panorama_004.jpg" onclick = "Set_Image_Change_param(this.className)">3</span>
		<span class="http://www.abciweb.net/PHOTO/panoramiques_008_exp.jpg" onclick = "Set_Image_Change_param(this.className)">4</span>
		</p>
 
		<img id= "gif_anime_chargement" src="http://www.abciweb.net/graphiques/attente.gif"  width="21" height="21" alt="Chargement des images" style="visibility:hidden;margin-left:10px;"  />
 
		<img onmouseover = "DF_ObjetDefilant_On('div_images_defilant')" onclick = "DF_ObjetDefilant_On_Inverse('div_images_defilant')"  style = "position:absolute;right:280px;top:6px;cursor:pointer;" src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
 
	</div>
 
</div>
 
 
 
 
<div id = "bloc2">
 
	<div id="cadre_images2">
 
			<!-- ne pas insérer de retour ligne ni d'espace entre la balise div ci-dessous et la balise img-->
			<div id="div_images_defilant2"><img src="http://www.abciweb.net/PHOTO/panorama_001.jpg"  alt="source image : http://badplayer.free.fr/" title="source image : http://badplayer.free.fr/" /></div>
	</div>
 
 
	<div  style="position:relative;width:600px;margin:auto;z-index:10;top:-30px;">
 
		<select id = "select_images" name = "select_images" onchange = "Set_Image_Change(this.value,'div_images_defilant2','gif_anime_chargement2', 400, 0,'manuel')" >
		<option value = "http://www.abciweb.net/PHOTO/panorama_001.jpg">Image1</option>
		<option value = "http://www.abciweb.net/PHOTO/panorama_002.jpg">Image2</option>
		<option value = "http://www.abciweb.net/PHOTO/panoramiques_008_exp.jpg">Image3</option>
		<option value = "http://www.abciweb.net/PHOTO/panorama_004.jpg">Image4</option>
		</select>
 
		<img id= "gif_anime_chargement2" src="http://www.abciweb.net/graphiques/attente.gif"  width="21" height="21" alt="Chargement des images" style="visibility:hidden;margin-left:10px;"  />
 
		<img onclick = "DF_ObjetDefilant_On_Inverse('div_images_defilant2')" onmouseout = "DF_ObjetDefilant_Off('div_images_defilant2')" style = "position:absolute;right:280px;top:6px;cursor:pointer;" src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
 
	</div>
 
</div>
 
 
</body>
</html>

Le résultat est visible ici

Bonjour,

Pour info,

Le code donné dans le message ci-dessus n'est pas fonctionnel avec les versions >= 2.0 de la fonction de défilement (inclue dans "objet-defilant.js"). Le code css et html à mettre en place nécessite quelques ajustements.

Nouveau code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr">
<title>Panoramique</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet-defilant.js"></script>
 
<script type="text/javascript">
<!--
//Nécessite script objet défilant version >= 2.0
 
 
// PARAMETRAGE du BLOC 1
// Chargement de la fonction avec ses paramètres
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant('div_images_defilant','auto','b','g','8','0','0','500')});
 
// Chargement automatique (facultatif mais recommandé) des images :
// Chargement des images du bloc ayant l'id "p_images" (avec des balises "span" pour inclure les images et "className" pour les identifier). 
addLoad_DF_ObjetDefilant(function() {Select_Img_Preload('p_images','span','className')});
 
 
 
 
 
// PARAMETRAGE du BLOC 2
 
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant ('div_images_defilant2','auto','r','g','15','0','0','500')});
 
// - Chargement de la fonction DF_ObjetDefilant_Off avec comme paramètre l'id du div défilant (pour un démarrage manuel)
//addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant_Off ('div_images_defilant2')});
 
// Chargement des images du bloc ayant l'id "select_images" avec des balises "option" pour inclure les images et "value" pour les identifier (fonction désactivée puisque les images sont les mêmes que pour le premier bloc)
//addLoad_DF_ObjetDefilant(function() {Select_Img_Preload('select_images','option','value')});
 
 
 
 
//NE PAS MODIFIER le code ci-dessous 
 
function Select_Img_Preload (id_select,tag,valeur)
{
 
	var id_select = document.getElementById(id_select);
 
	if (id_select)
		{
			var tab_image = new Array();
 
			var Select_image_preload = new Array();
 
			tab_image = id_select.getElementsByTagName(tag);
 
			for (var i=0; i < tab_image.length; i++)
				{	
					switch (valeur)
						{
							case 'value' : val = tab_image[i].value;break;
							case 'className' : val = tab_image[i].className;break;
							case 'id' : val = tab_image[i].id;break;
							case 'name' : val = tab_image[i].name;break;
 
							default : alert('Attributs utilisés pour les images : "value" ou "className" ou "id" ou "name"\r\n (cf :  switch de la fonction "Select_Img_Preload ")');
						}
 
					Select_image_preload[val] = new Image();
					Select_image_preload[val].src = val;
				}
		}
}
 
 
 
 
 
 
function Set_Image_Change(image_select, id_defilant, id_img_preload, temps_fondu, opacite_mini, mode)  
{
 
var Ob_id = document.getElementById(id_defilant);
if (typeof Ob_id == 'object' && typeof image_select == 'string')
	{	
		DF_ObjetDefilant_Off (id_defilant);// obd
 
		var image_nv = new Image();
		image_nv.src = image_select;
 
		var temps_fondu = typeof temps_fondu != 'undefined' && temps_fondu != '' ? parseInt(temps_fondu)/2 : 0 ;
		var opacite_mini = typeof opacite_mini != 'undefined' && opacite_mini != '' ? parseInt(opacite_mini) : 0 ;
 
 
		var image_preload = document.getElementById(id_img_preload);
		image_preload = typeof image_preload == 'object' ? image_preload : false;
 
		var tab_image = Ob_id.getElementsByTagName('img');
		var image_source = typeof tab_image[0] != 'undefined' ? tab_image[0].src : null;
 
		var Ob_st = Ob_id.style;
 
 
		function Objet_defilant()
		{
			// variable interne de la fonction DF_ObjetDefilant (pour réinitialiser les paramètres) 
			this.DF_ObjetParam[id_defilant]['id_defile'] = undefined;
 
			// variable interne de la fonction DF_ObjetDefilant (appel de la fonction)
			this.DF_ObjetParam[id_defilant]['instance']();
 
			if (typeof mode != 'undefined' && mode != '') DF_ObjetDefilant_Off (id_defilant);
		}
 
 
		function Img_attribut ()
		{
			var largeur = image_nv.width;			
			var noeuds_nb = Ob_id.childNodes.length;
 
			for (var i = 0; i < noeuds_nb; i++) Ob_id.removeChild(Ob_id.firstChild);
 
			var element_img = document.createElement("img");
			element_img.setAttribute('src',image_select);
			element_img.setAttribute('width',largeur);
 
			Ob_st.width = largeur+'px';
			Ob_st.left = 0+'px';
 
			Ob_id.appendChild(element_img);
		}	
 
 
		function Increment_opacite()
		{
			var opac_ini = opacite_mini < 0 || opacite_mini > 100 ? 0 : opacite_mini;
 
			var nb_cycles = temps_fondu/10; // 10 = valeur setTimeout mini réalisable par les navigateurs
 
			var opacite_t = 100 - opac_ini;
 
			var incr_opac = nb_cycles != 0 ? opacite_t/nb_cycles : 0;
 
			// incr_opac = 0 si temps_fondu = 0 ou indéfini ou si opacite_mini = 100
			return incr_opac;
		}
 
 
		function Change_opac_Plus (incr_opac, Ob_id, opacite)
		{			
			Ob_st.opacity = (opacite / 100);
			Ob_st.MozOpacity = (opacite / 100);
			Ob_st.KhtmlOpacity = (opacite / 100);
			Ob_st.filter = "alpha(opacity=" + opacite + ")";
 
			opacite += incr_opac;
 
			if (opacite <= 100) 
			{
				setTimeout(function(){Change_opac_Plus(incr_opac, Ob_id, opacite)}, 10);
			}
			else
			{
				Ob_st.filter = null; // obd indispensable pour ie 6 et défilement
 
				Objet_defilant(); // obd
			}
		}
 
 
		function Change_opac_Moins (incr_opac, Ob_id, opacite)
		{			
			Ob_st.opacity = (opacite / 100);
			Ob_st.MozOpacity = (opacite / 100);
			Ob_st.KhtmlOpacity = (opacite / 100);
			Ob_st.filter = "alpha(opacity=" + opacite + ")";
 
			opacite -= incr_opac;
 
			if (opacite >=  opacite_mini) 
			{
				setTimeout(function(){Change_opac_Moins(incr_opac, Ob_id, opacite)}, 15);
			}
			else
			{
				Img_attribut ();
				Change_opac_Plus (incr_opac, Ob_id, opacite)
			}
		}
 
 
		function Img_change ()
		{
			if(image_preload) image_preload.style.visibility = 'hidden';
 
			var incr_opac = Increment_opacite();
 
			if (incr_opac != 0)
				{
					if (temps_fondu > 0 && image_source != null)
						{
							Change_opac_Moins (incr_opac, Ob_id, 100);			
						}	
						else
						{
							Img_attribut();
							Change_opac_Plus (incr_opac, Ob_id, opacite_mini);
						}
				}
				else
				{
					Img_attribut();
					Objet_defilant(); // obd
				}		
		}
 
 
		function Img_Complete ()
		{		
			if(image_nv.complete == true) 
				{	
					Img_change ();				
				}
				else				
				{
					setTimeout(function(){Img_Complete()},250);
				}
		}
 
 
		if(image_nv.complete != true) 	
			{
				if(image_preload) image_preload.style.visibility = 'visible';
 
				Img_Complete ();
			}
		else
			{
				Img_change ();
			}
 
	}	
}
 
// Fin du code à ne pas modifier
 
 
 
// Fonction spécifique pour simplement éviter d'avoir à déclarer la fonction Set_Image_Change et l'ensemble de ses paramètres dans l'évènement onclick des balises span du bloc <p id = "p_images">
function Set_Image_Change_param (image_select)
{
	Set_Image_Change(image_select,'div_images_defilant','gif_anime_chargement',250,50);
}
 
-->
</script>
 
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	background: #000;
	border: 20px solid  #000;
	border-bottom:30px solid  #000;
	width:600px; 
	height:480px;
	margin: 2em auto 0 auto;
	overflow: hidden;
	z-index:5;
}
 
 
#p_images {
	display:inline;
}
 
 
#p_images span {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	cursor:pointer;
	margin-left:5px;
}
 
 
#cadre_images2 { 
	position: relative;
	background:#fff;
	border: 20px solid  #000;
	border-bottom:30px solid  #000;
	width:600px; 
	height:480px;
	margin: 2em auto 0 auto;
	overflow: hidden;
	z-index:5;
}
 
 
#select_images {
	height:21px; 
	background: #F0C000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
 
#conteneur_defil, #conteneur_defil2 {
	position : relative;
	visibility:hidden;
	overflow : hidden;
	height:100%;
}
-->
</style>
</head>
 
<body>
 
<div id = "bloc1">
 
	<div id="cadre_images">
		<div id = "conteneur_defil">
				<div id="div_images_defilant" onmouseover = "DF_ObjetDefilant_Off('div_images_defilant')">
 
				<img src = "http://www.abciweb.net/PHOTO/panorama_002.jpg"  alt = "source image : http://badplayer.free.fr/" title = "source image : http://badplayer.free.fr/" />
 
				</div>
		</div>		
	</div>
 
 
	<div  style="position:relative;width:600px;margin:auto;z-index:10;top:-30px;">	
 
		<p id = "p_images">
		<span class="http://www.abciweb.net/PHOTO/panorama_002.jpg" onclick = "Set_Image_Change_param(this.className)">1</span>
		<span class="http://www.abciweb.net/PHOTO/panorama_001.jpg" onclick ="Set_Image_Change_param(this.className)">2</span>
		<span class="http://www.abciweb.net/PHOTO/panorama_004.jpg" onclick = "Set_Image_Change_param(this.className)">3</span>
		<span class="http://www.abciweb.net/PHOTO/panoramiques_008_exp.jpg" onclick = "Set_Image_Change_param(this.className)">4</span>
		</p>
 
		<img id= "gif_anime_chargement" src="http://www.abciweb.net/graphiques/attente.gif"  width="21" height="21" alt="Chargement des images" style="visibility:hidden;margin-left:10px;"  />
 
		<img onmouseover = "DF_ObjetDefilant_On('div_images_defilant')" onclick = "DF_ObjetDefilant_On_Inverse('div_images_defilant')"  style = "position:absolute;right:280px;top:6px;cursor:pointer;" src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
 
	</div>
 
</div>
 
 
 
 
<div id = "bloc2">
 
	<div id="cadre_images2">
		<div id = "conteneur_defil2">
				<div id="div_images_defilant2">
 
					<img src="http://www.abciweb.net/PHOTO/panorama_001.jpg"  alt="source image : http://badplayer.free.fr/" title="source image : http://badplayer.free.fr/" />
 
				</div>
		</div>
	</div>
 
 
	<div  style="position:relative;width:600px;margin:auto;z-index:10;top:-30px;">
 
		<select id = "select_images" name = "select_images" onchange = "Set_Image_Change(this.value,'div_images_defilant2','gif_anime_chargement2', 400, 0,'manuel')" >
		<option value = "http://www.abciweb.net/PHOTO/panorama_001.jpg">Image1</option>
		<option value = "http://www.abciweb.net/PHOTO/panorama_002.jpg">Image2</option>
		<option value = "http://www.abciweb.net/PHOTO/panoramiques_008_exp.jpg">Image3</option>
		<option value = "http://www.abciweb.net/PHOTO/panorama_004.jpg">Image4</option>
		</select>
 
		<img id= "gif_anime_chargement2" src="http://www.abciweb.net/graphiques/attente.gif"  width="21" height="21" alt="Chargement des images" style="visibility:hidden;margin-left:10px;"  />
 
		<img onclick = "DF_ObjetDefilant_On_Inverse('div_images_defilant2')" onmouseout = "DF_ObjetDefilant_Off('div_images_defilant2')" style = "position:absolute;right:280px;top:6px;cursor:pointer;" src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
 
	</div>
 
</div>
 
 
</body>
</html>

... en contre partie d'un bloc div supplémentaire dans le code html (<div id = "conteneur_defil">) , la fonction de défilement permet maintenant un défilement horizontal ou vertical et peut fonctionner sans avoir à passer la dimension du défilant comme paramètre à la fonction dans tous les cas ex : une ou plusieurs images, images plus texte, texte.

Les liens du message précédent sont toujours valides.