Discussion :

[ideal23]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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

Effectivement... ça aide pour visualiser la chose

[ideal23]

milles excuses, voici le bon lien: http://galaxyweb.free.fr/systeme.php

[ideal23]

avez-vous pu accéder au lien de démonstration de mon problème?
Merci pour votre réponse

[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

[ABCIWEB]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>