Forum d'entraide PHPFrance

Bonjour,

Cette fonction est la grande soeur de celle-ci.

Elle permet en plus :

- De choisir un défilement horizontal ou vertical.

- De ne pas avoir toute la largeur du cadre vide en attendant le retour de boucle. La boucle est réellement continue et l'espace de retour de boucle est paramétrable.

- De choisir un aller-retour plutôt qu'une boucle continue.

- De paramétrer une pause avant le départ.

- De contrôler l'arrêt et le départ du défilant avec des évènements (onmouseover, onmouseout, onclick...) sur des éléments de votre choix.

- D'inverser le sens de défilement en cour jusqu'à la position initiale de départ.

- De faire défiler plusieurs objets dans une même page.

- De ne pas avoir à indiquer la largeur (ou la hauteur) totale du défilant, à la condition de renseigner la hauteur et la largeur des éventuelles images dans le bloc défilant.


Vous pouvez tester directement le code ci-dessous qui contient deux objets défilants en copiant-collant le code.

Pour d'autres exemples directement visibles, ou pour pouvoir facilement composer votre objet défilant dans une interface graphique et récupérer le code utile c'est ici


Paramètres de la fonction :

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 :
onmouseover = "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

Exemple complet :

<!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 d'objets défilants http://www.abciweb.net</title>
<script type="text/javascript">
<!--
// Objets défilants A. Bontemps, abciweb.net Version 2.2
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.paddingRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.paddingLeft = this.DF_ObjetParam[id]['b_esp']+'px';		
				}
				else 
				{
					this.DF_ObjetParam[id]['sens_ini'] == 'h' ? div_contenu.style.paddingBottom = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.paddingTop = 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);
		}
}
-->
</script> 



<script type="text/javascript">
<!--
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('images_defilant','auto','r','g','10','10','0','1500')});
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('texte_defilant','auto','b','g','15','100','50','250')});
-->
</script>



<style type="text/css">
<!--
#cadre_images { 
	border: 18px solid #CC0066;
	width:230px; 
	height:405px;
	margin: 2em auto 0 auto;
	overflow: hidden;/*pour ie*/

}



#cadre_texte { 
	
	width:260px; 
	height:25px;
   	border-top: 1px solid #CCCCCC;
   	border-bottom: 1px solid #CCCCCC;   
	margin: 2em auto 0 auto;
	padding-top:2px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color: #003399;
	overflow: hidden;/*pour ie*/

}

#conteneur_defil, #conteneur_defil2 {
	position : relative;
	visibility:hidden;/*pour ie*/
	overflow : hidden;
	height:100%;
}




-->
</style>
</head>

<body>

 <div id="cadre_images">
 
	<div id = "conteneur_defil" >
  		<div id="images_defilant"  onmouseover = "DF_ObjetDefilant_Off('images_defilant')"  onmouseout = "DF_ObjetDefilant_On('images_defilant')">
		<img src="http://www.abciweb.net/PHOTO/bimbo.jpg" width="137" height="405" title="Bimbo 1" alt="Bimbo 1" style="margin:0 3em" /><img style = "margin:0 3em"src="http://www.abciweb.net/PHOTO/bimbo2.jpg" width="133" height="400" title="Bimbo 2" alt="Bimbo 2" />
		</div>
	</div>
 </div>
	

<div onclick = "DF_ObjetDefilant_Inverse('images_defilant')" style="position:relative;width:40px;margin:auto; cursor:pointer;z-index:10;top:-17px"><img src="http://www.abciweb.net/images_nav/fleche_aller_retour_blanc_fong_rouge.png" width="40"  height="15"  alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>




<div id = "cadre_texte">
	<div id = "conteneur_defil2" onmouseover = "DF_ObjetDefilant_Off('texte_defilant')"  onmouseout = "DF_ObjetDefilant_On('texte_defilant')">
		<div id = "texte_defilant">
		<strong>Exemple avec défilé de bimbos. &nbsp;&nbsp;&nbsp;<a class="liens" href="http://www.abciweb.net/objet-defilant.php">Autres exemples</a> ...</strong>
		</div>
	</div>
</div>



</body>
</html>

Voir le résultat de l'exemple ci-dessus

Notes :

- Le paramétrage css du bloc conteneur (#conteneur_defil dans l'exemple ci-dessus) est toujours identique et indispensable.

- Pour d'autres comportements (défilant arrêté au départ puis commandé par un bouton de navigation etc.), voir ce message

- Pour un exemple de défilement vertical, voir la page 2 de ce topic.


... plus pratique, plutôt que d'intégrer tout le code javascript dans votre page, il suffit de conserver l'appel à la fonction de défilement soit le deuxième bloc javascript (addLoad_DF_ObjetDefilant...) et de mettre le premier bloc javascript dans un fichier que vous nommerez par exemple "objet_defilant.js" et que vous appellerez par cette ligne :

<script type="text/javascript" src="mon_dossier_javascript/objet_defilant.js"></script>

(à inclure entre les balises <head> et </head> du code html, comme dans le code source du lien de l'exemple ci-dessus).

Contenu du fichier "objet_defilant.js"

EDIT du 6 janvier 2011 : message édité et contenu supprimé car devient obsolète depuis la version 2.0 en ligne actuellement

j'hésite a être contre ce truc la, en plusieurs point

1. XHTML n'a jamais été obligatoire au bon fonctionnement d'un site ni au parser (meme si je fais et recommande que du XHTML 1.0 tendance 1.1 dans le sens ou la 1.1 n'est pas compatible avec IE)
2. En exercice de style c'est tres bien, mais presque tout les framework javascript propose ca (et quand on regarde derriere des fois ca fait peur)
3. un petit marquee pour la route innerHTML = '<marquee>Coucou</marquee>' .....
4. CSS3 la blague du marquee avec overflow-style:marquee-line; (cf: http://www.w3.org/TR/css3-marquee/)
5. Parce je suis faible et au bout de 7 ans j'ai enfin abandonné (comme beaucoup) l'idée d'un rendu exact sur les navigateurs, simplicité et sobriété oblige, pour les truc hyperchiadé cf: Actionscript 3.0
6. IE le retour avec quelques minimes propriétés CSS3, parce que d'ici la fin de l'année j'espère tout ca sera en route.

1. Qu'à cela ne tienne, tu peux bien mettre un charset 1.0 si ça te chante. Mais ça fonctionnera aussi bien en 1.0 qu'en 1.1 même avec IE. Si j'ai mentionné ces infos c'est qu'elles étaient indiquées dans le titre de la fonction initiale dont je parle en introduction et que celle-ci en est un développement.
2. Ah bah tu te doute bien que c'est pas conçu spécialement pour les pros qui utilisent leur framework favori. C'est justement fait pour les autres qui veulent un code tout prêt sans avoir à apprendre préalablement l'utilisation d'un framework, précisément.
3. Marquee, oui tu sais bien que ça trébuche plus que ça ne défile
4. CSS3 tu rigoles ? Le dernier site que j'ai fini le mois dernier devait être compatible Mozilla 2.0.0.1 et IE6 ! Et le client avait les moyens de ses exigences...
5. Actionscript 3.0 Faut pas en parler dans le monde du libre, ça fait désordre
6. C.f. réponse 4

Sinon pour info, le forum "Contribution" n'est surtout pas prévu pour le troll.
Ne devrait s'y trouver que des questions sur tel ou tel fonctionnement non documenté, rapport de bug, suggestions ou code d'optimisation etc.
Je dis cela pour les messages suivants; le tiens m'ayant permis de répondre à certaines questions d'ordre général que d'autres personnes pourraient se poser. Mais sur ce point je crois avoir fait le tour de la question

pour ton point 3, moi c'est l'horreur la ou je taff j'ai encore 25% d'IE6 sur 66% d'IE ,
sinon tu peux très bien codé de l'actionscript 3.0 gratuitement et ceux depuis des année

Attention!
Libre != Gratuit

Attention!
Libre != Gratuit

ouai c'est vrai, je corrige, le flex SDK etant Open Source aussi
haXe aussi

Bonjour,

La classe php ci-dessous permet d'alimenter dynamiquement la fonction javascript DF_ObjetDefilant avec des images, en listant un répertoire d'images, ou à partir d'une base de donnée contenant leurs adresses.

Elle est conçue pour programmer un défilement horizontal.

EDIT du 6 janvier 2011
Cette classe est obsolète depuis la disponibilité de la version 2.0 de la fonction de défilement (en ligne depuis début 2011) puisque son intérêt réside dans le calcul de la largeur totale du défilant qui sera passé en paramètre à la fonction, en tenant compte du bord des images, de leur espacement et de leur largeur. La version 2 ne nécessitant plus de passer la dimension du défilant à la fonction - pour peu que le code html généré mentionne les dimensions des images - le script maintenant nécessaire pour une alimentation dynamique du défilant n'a plus aucune difficulté particulière.
fin EDIT

Si vous utilisez une base de donnée pour sélectionner vos images, vous aurez à modifier les paramètres de connexion à la base de donnée dans la fonction "Img_table", ainsi que la requête si vous employez un autre schéma de tables que celles fournies en exemple.

Eventuellement, vous pouvez modifier les valeurs par défaut indiquées à la fin de la classe, mais vous pouvez également modifier ces valeurs en paramétrant la classe comme dans les exemples d'utilisation.


Notes :
- La première ligne du code php est pour travailler en utf-8 (à modifier si vous travaillez en ISO 8859-1)

- J'ai reporté le code de la fonction DF_ObjetDefilant dans un fichier nommé "objet_defilant.js", inclus dans un dossier nommé "Scripts", d'où la ligne <script src="Scripts/objet_defilant.js" type="text/javascript"></script> pour inclure le code javascript dans la partie html.

- Le chargement des objets défilants dans la page html se fait dans le bloc javascript : //Chargement des objets défilants

Exemple complet avec code HTML

<?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 :

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);

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');

Voir le résultat de l'exemple

Et pour des besoins ponctuels, sans avoir à écrire une seule ligne de code et pouvoir récupérer le code utile cette interface est toujours disponible.

Si vous avez des questions sur l'utilisation de cette classe PHP, merci d'ouvrir un sujet dans le forum php


Dans le cas d'utilisation d'une base de donnée :
A noter que si les dimensions des images ne sont pas renseignées dans la base de donnée, le script ira chercher automatiquement ces dimensions à l'aide de la fonction getimagesize(). Mais cette fonction étant gourmande en ressource, vous avez tout intérêt à renseigner ces dimensions en bdd pour accélérer l'exécution de votre script.

Bonjour (ou bonsoir)

J'ai bien tenté de mettre ce code à "ma sauce" mais vu que je n'y connais rien et que j'ai appris tout seul, j'ai quand même un problème persistant avec la vitesse...

Voilà, en local pas de soucis (bien que réglé à 7 ce ne soit pas très rapide) mais dès que je mets en ligne, ça sautille, ça bloque et c'est lent... très lent.

Je suis sûr que le problème est très bête et que pour vous ça coule de source... mais pour moi, je sèche...

Vous pouvez constater le résultat ci-dessous (on se moque pas de mes codes, c'est pas du tout mon métier mais j'ai pas les moyens de me payer un site fait par un pro...)

Merki d'avance

Ma page qui Bug

Bonjour,

Plus tu mets une vitesse rapide plus cela risque de faire des saccades... mais normalement peu fréquentes et beaucoup plus légères que dans ton exemple - quoi que par moments ton code fonctionne correctement, bizarre...

Concernant ton code : normalement le javascript se met entre les balises head, pas entre deux div à l'intérieur de la balise body, mais ce n'est peut-être pas l'origine du pb.

Si tu trouve que cela fonctionne correctement en local, il n'y a pas de raison que cela soit différent sur le serveur distant puisque c'est le navigateur qui fait le même travail dans les deux cas. Ou alors c'est que tu ne teste pas le même code.

J'ai fait défiler tes logos en rentrant leur adresse dans cette interface et c'est beaucoup plus fluide que dans ton exemple. Essaies d'utiliser cette interface et récupère le code Webmestre si cela te convient (dans l'interface il suffit d'insérer des espaces pour séparer les images).

Par ailleurs, dans les messages plus haut j'ai mis des exemples que je te redonne ici et là. Tu devrais pourvoir obtenir un résultat équivalent au niveau du rendu du défilement pour tes images.

EDIT : j'ai trouvé l'explication. Quand je regarde l'utilisation processeur de ma machine, ta page consomme jusqu'à 25% et des pointes à 30% des ressources processeur - un Quad Core 3GHz ...quand même - ce qui est énorme. Pour peu que l'on exécute simultanément plusieurs taches assez gourmandes en ressources (la première fois que j'ai regardé ta page je faisais de l'encodage vidéo plein pot en tache de fond), la limite du processeur est atteinte et donc ça saccade. Par comparaison les mêmes logos que j'ai fait défiler à la même vitesse en utilisant l'interface de création de code mentionnée plus haut, n'utilisent qu'en moyenne 2% et des pointes à 4% de ressources processeur.

Le plus étrange est que parfois la consommation en ressource processeur de ta page est normale Peut-être as-tu d'autres scripts qui interfèrent ponctuellement ou qui sont mal intégrés...


Remarque :

Plutôt que d'utiliser directement mon image d'inversion de sens de défilement tu aurais pu en créer une avec un fond adapté à ta page. Ou au minimum l'enregistrer sur ton serveur plutôt que mettre directement le lien vers mon image, car si je venais à supprimer cette image ou à la modifier pour faire une blague ...

Bonjour,

Mise à jour : ajout d'une fonction de chargement qui permet à cette fonction de cohabiter avec d'autres scripts utilisant l'évènement onload.

Le code et les commentaires ont été modifiés en conséquence

Note : Je laisse ce message pour ne pas rompre des liens mais passez directement au message suivant qui propose des solutions plus optimisées.

Trois fonctions ont été créées pour un paramétrage plus complet et plus intuitif des comportements :

DF_ObjetDefilant_On (marche)
DF_ObjetDefilant_Off (arrêt)
DF_ObjetDefilant_On_Inverse (marche si le défilement est arrêté et inversion du sens de défilement si le défilement est en cours)

Exemples pour un défilement non automatique des blocs 1 et 3 au chargement de la page :

<!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>Générateur d'objets défilants http://www.abciweb.net</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet-defilant.js"></script>

<script type="text/javascript">
<!--

//EXEMPLE 1

// Chargement de la fonction avec ses paramètres
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant ('images_defilant','auto','r','g','8','0','0','1000')});

// Chargement de la fonction DF_ObjetDefilant_Off (pour un démarrage manuel) avec comme paramètre l'id du div défilant 
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant_Off ('images_defilant')});



//EXEMPLE 2

// Chargement de la fonction avec ses paramètres
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant ('images_defilant2','auto','r','g','8','0','0','500')});


//EXEMPLE 3
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('div_texte_defilant','auto','b','g','17','1','10')});
addLoad_DF_ObjetDefilant(function() {DF_ObjetDefilant_Off ('div_texte_defilant')});

-->
</script>



<style type="text/css">
<!--
#cadre_images { 
    border: 18px solid black;
    border-bottom: 25px solid black;
    width:600px; 
    height:480px;
    margin: 2em auto 0 auto;
    overflow: hidden;
}

#bouton_navig {
    position:relative;
    width:40px;
    margin:auto; 
    cursor:pointer;
    z-index:10;
    top:-22px
}

#cadre_images2 { 
    position: relative;
    border: 18px solid black;
    border-bottom: 25px solid black;
    width:600px; 
    height:480px;
    margin: 4em auto 0 auto;
    overflow: hidden;
}

#bouton_navig2 {
    position:relative;
    width:40px;
    margin:auto; 
    cursor:pointer;
    z-index:10;
    top:-22px
}


#cadre_texte {
    width:570px;
    height:20px;
    margin:2em auto 8em auto;
    overflow: hidden;
    font-size:12px; 
    font-family:Arial, Helvetica, sans-serif;
    color:blue; 
    cursor:pointer;
}

#conteneur_defil, #conteneur_defil2, #conteneur_texte {
    position : relative;
    visibility:hidden; 
    overflow : hidden;
    height:100%;
}

-->
</style>

</head>

<body>


 <div id="cadre_images">
     <div id = "conteneur_defil">
          <div id="images_defilant">
        <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 id="bouton_navig" onmouseover = "DF_ObjetDefilant_On('images_defilant')" onclick = "DF_ObjetDefilant_On_Inverse('images_defilant')"  onmouseout = "DF_ObjetDefilant_Off('images_defilant')"><img src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
</div>




<div id="cadre_images2">
     <div id = "conteneur_defil2">
          <div id="images_defilant2" onmouseover ="DF_ObjetDefilant_Off('images_defilant2');DF_ObjetDefilant_On('div_texte_defilant')">
        <img src="http://www.abciweb.net/PHOTO/panorama_004.jpg" alt="source image : http://badplayer.free.fr/" title="source image : http://badplayer.free.fr/" />
        </div>

    </div>
 </div>
    

<div id="bouton_navig2" onclick = "DF_ObjetDefilant_On_Inverse('images_defilant2');"><img src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
</div>



<div id = "cadre_texte">
    <div id = "conteneur_texte" onmouseover = "DF_ObjetDefilant_Off('div_texte_defilant');DF_ObjetDefilant_On('images_defilant2')" >
        <div id="div_texte_defilant">
        Juste pour le fun... en même temps que vous survoler l'image (pour l'arrêter) cela fait démarrez ce texte... et inversement &nbsp;&nbsp; <img src="http://www.abciweb.net/Images_smiles/clind.gif" alt="" width="15" height="15" />

        </div>
    </div>
</div>

</body>
</html>

Voir le résultat de l'exemples

Version 1.3 en ligne.

Correction d'un bug (qui se produisait uniquement sur les navigateurs ancestraux) pour le chargement onload de la fonction DF_ObjetDefilant_Off, utilisée dans l'exemple 1 du message précédent pour éviter le défilement automatique au chargement de la page.


J'en profite pour poster deux autres exemples qui cette fois-ci permettent de changer une image panoramique à l'intérieur d'un même bloc avec en transition un effet de fondu à la couleur que vous voulez...

Pas le temps de commenter en détails pour l'instant (edit : c'est fait dans le message suivant), je ferai ça dans un proche avenir et y'a déjà le minimum essentiel dans le code source. J'ajoute que les trois derniers paramètres (facultatifs) de la fonction "Set_Image_Change" sont respectivement le temps de fondu exprimé en millisecondes, l'opacité minimum avec des valeurs comprises entre 0 et 100, et le démarrage automatique ou non du défilant suite au chargement de l'image (automatique par défaut). En jouant en plus avec les couleurs de background des cadres ça donne de nombreuses possibilités pour personnaliser les transitions.

Bah c'est bientôt noël, faut bien que les grands enfants s'amusent

<!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 (Ob_id && 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>

Voir le résultat des exemples

Bon si vous connaissez des panoramiques plus zolis et gratuits pour mes exemples (j'ai pris les premiers que j'ai trouvé), merci de me donner l'adresse

Bien que les photos ne s'y prêtent pas trop (à part un peu la première image du premier bloc), j'ai paramétré le premier bloc en boucle pour faire du 360° continu

Pour toute utilisation personnelle, vérifiez que vous n'avez plus de liens vers mon site

EDIT du 07/01/2011

Le code css et html de l'exemple ci-dessus a été mis à jour pour être compatible avec la version 2.0 de la fonction de défilement.

Salut,

J'ai modifié un peu la fonction Set_Image_Change de mon message précédent pour qu'elle soit plus facilement réutilisable dans d'autres contextes.

Un peu plus de commentaires concernant le paramétrage des fonctions du précédent message :

1/ Donc dans un premier temps je paramètre mes fonctions "DF_ObjetDefilant" et je les charge avec "addLoad_DF_ObjetDefilant(function())", comme d'habitude.

2/ Ensuite, pour que les différentes images qui ne sont pas affichées dans le code source html soient chargées, j'utilise la nouvelle fonction "Select_Img_Preload" que je charge toujours avec "addLoad_DF_ObjetDefilant(function())"

Cette fonction "Select_Img_Preload (id_select,tag,valeur)" peut lister et charger des images inclues dans un bloc identifié par un id html "id_select", contenant les balises "tag" dont on peut extraire notre valeur (adresse de l'image) avec l'attribut "valeur". L'attribut "valeur" peut être "value", "className", "id" ou "name".

Soit Select_Img_Preload ('bloc_images','span','className') pour : et Select_Img_Preload ('bloc_1','p','id') pour : etc.


3/ La fonction "Set_Image_Change" a été créée pour changer l'image en cours et effectuer ou non une transition de fondu entre les différentes images. - "image_select" = l'adresse de la nouvelle image.

- "id_defilant" = l'id du bloc parent contenant l'affichage de l'image.

- "id_img_preload" (facultatif) = id du bloc contenant une image animée qui s'affiche si le téléchargement de la nouvelle image n'est pas totalement terminé. Ce bloc est ensuite caché dès que l'image est totalement chargée.

- "temps_fondu" (facultatif) = nombre représentant la durée totale du fondu (en milliseconde). Pas de fondu si non renseigné ou = 0 ou = ""

- "opacite_mini" (facultatif) = nombre de 0 à 100 représentant le seuil du fondu (en milliseconde). Le fondu ira jusqu'à cette valeur puis s'inversera pour être ramené à 100 (image pleine). Donc si vous indiquez 100 il n'y aura pas de fondu. Par défaut cette valeur = 0 si non renseigné ou = "".

- "mode" (facultatif) = spécifique au lancement de la fonction DF_ObjetDefilant. Si non renseigné ou = "", la fonction DF_ObjetDefilant sera lancée dès la fin du chargement de l'image et la fin du fondu. Si renseigné par tout caractère différent de "", la fonction DF_ObjetDefilant ne sera pas lancée (et l'image ne défilera pas automatiquement mais le défilement sera possible en utilisant la touche de navigation du défilant comme dans l'exemple 2 du message précédent)





Notes :

1/ La fonction "Set_Image_Change_param (image_select)" a été créée simplement pour éviter d'avoir à appeler la fonction Set_Image_Change et tous ses paramètres dans les lignes du bloc <p id = "p_images"> de mon premier exemple (bloc_1 de mon message précédent).
On pourrait donc s'en passer mais dans ce cas il aurait fallu écrire :
2/ Si vous souhaitez économiser de la bande passante vous pouvez ne pas utiliser la fonction "Select_Img_Preload" (mais le visiteur perdra du confort en temps d'attente). Le gif animé d'attente de chargement prendra (s'il existe) le relais jusqu'au chargement complet de la nouvelle image.


3/ La fonction "Set_Image_Change" constitue la base d'un diaporama avec fondu à la couleur.
A l'intérieur de cette fonction, les commentaires "// obd" suivent les lignes qui font appel à la fonction "DF_ObjetDefilant". Si vous supprimez ces 4 lignes et la fonction "Objet_defilant" (ou les mettez en commentaires) vous avez une fonction de diaporama classique.
Pour l'optimiser en tant que diaporama classique et centrer horizontalement des images éventuellement plus petites que le cadre vous pouvez formater le code html de l'image comme ceci :
<img style="margin:auto; display:block" src="ma_photo.jpg" alt="" />
et dans la fonction "Set_Image_Change" remplacer la ligne Ob_st.left = 0+'px'; par Ob_st.margin = 'auto'; (sinon vous aurez un alignement à gauche nécessaire pour utiliser cette fonction combinée à la fonction DF_ObjetDefilant).




Important :
Le code de mon précédent message est fonctionnel si vous le copiez/collé. Cependant, pour toute utilisation personnelle, n'oubliez pas de remplacer les appels à mon site par vos valeurs car mes liens ne seront peut-être pas toujours disponibles