Bonjour,

Il y a longtemps j'ai éditer ce script me permettant de changer de bannières automatiquement (rotation de bannières).
Il fonctionne bien mis à part en ce qui concerne le délai (temps de diffusion) de chaque bannières.

En effet, si je définis le temps d'affichage de la première bannière à 10 secondes et que je définis le temps de la deuxième bannière à 20 secondes, le système affichera la première bannière pendant 20 secondes et la seconde à 10 secondes !

Si maintenant j'ai 3 bannières à afficher avec 10 secondes pour la première, 20 seconde pour la deuxième et 30 secondes pour la troisième,
Le système affichera la première bannière à 20 secondes, la seconde à 30 secondes et la troisième à 10secondes

Pour ne pas que ca déconne, je dois mettre le même nombre de secondes pour chaques bannières

J'ai pensé à la ligne :
[javascript]setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);[/javascript]

Mais en modifiant this.currentBanner ou bannerDuration, ca déconne ...
Qu'est ce qui cloche ?

Pouvez-vous m'aider ?


[javascript]// BANNER OBJECT
function Banner(objName){
this.obj = objName;
this.aNodes = [];
this.currentBanner = 0;

};

// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink);
};

// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink= hyperlink;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};

// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor="#FFFCDA" '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
}

if ( this.aNodes[iCtr].bannerType == "FLASH" ){
str = str + '<OBJECT '
str = str + 'id="bannerauto" '
str = str + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
str = str + 'codebase="http://download.macromedia.com/pub/shoc ... on=6,0,0,0" '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="" '
str = str + 'VIEWASTEXT>'
str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
str = str + '<PARAM NAME=quality VALUE=high>'
str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
str = str + '<EMBED ';
str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
str = str + 'quality=high '
// str = str + 'bgcolor=#FFFCDA '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="center" '
str = str + 'TYPE="application/x-shockwave-flash" '
str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
str = str + '</EMBED>'
str = str + '</OBJECT>'
}else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
str = str + '<img id="bannerauto" src="'+this.aNodes[iCtr].bannerPath+'" ';
str = str + 'border="0" ';
str = str + 'height="'+this.aNodes[iCtr].height+'" ';
str = str + 'width="'+this.aNodes[iCtr].width+'">';
}

if (this.aNodes[iCtr].hyperlink != ""){
str = str + '</a>';
}

str += '</span>';
}
return str;
};

// START THE BANNER ROTATION
Banner.prototype.start = function(){
this.changeBanner();
var thisBannerObj = this.obj;
// CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}

// CHANGE BANNER
Banner.prototype.changeBanner = function(){
var thisBanner;
var prevBanner = -1;
if (this.currentBanner < this.aNodes.length ){
thisBanner = this.currentBanner;
if (this.aNodes.length > 1){
if ( thisBanner > 0 ){
prevBanner = thisBanner - 1;
}else{
prevBanner = this.aNodes.length-1;
}
}
if (this.currentBanner < this.aNodes.length - 1){
this.currentBanner = this.currentBanner + 1;
}else{
this.currentBanner = 0;
}
}


if (prevBanner >= 0){
document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
}
document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}

[/javascript]


Merci !

C'est bon ... j'ai trouvé !
Je changeait la bannière avant le timeout. il prenait donc les valeurs de la bannière suivante pour le timeout.

Pour ceux que ça intéresse, voici le code complet avec appel de fonction

Fichier: banner.js

[javascript]// BANNER OBJECT
function Banner(objName){
this.obj = objName;
this.aNodes = [];
this.currentBanner = 0;

};

// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink);
};

// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
this.name = name;
this.bannerType = bannerType;
this.bannerPath = bannerPath;
this.bannerDuration = bannerDuration;
this.height = height
this.width = width;
this.hyperlink= hyperlink;
// alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};

// Outputs the banner to the page
Banner.prototype.toString = function() {
var str = ""
for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
str = str + '<span name="'+this.aNodes[iCtr].name+'" '
str = str + 'id="'+this.aNodes[iCtr].name+'" ';
str = str + 'class="m_banner_hide" ';
str = str + 'bgcolor="#FFFCDA" '; // CHANGE BANNER COLOR HERE
str = str + 'align="center" ';
str = str + 'valign="top" >\n';
if (this.aNodes[iCtr].hyperlink != ""){
str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
}

if ( this.aNodes[iCtr].bannerType == "FLASH" ){
str = str + '<OBJECT '
str = str + 'id="bannerauto" '
str = str + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
str = str + 'codebase="http://download.macromedia.com/pub/shoc ... on=6,0,0,0" '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="" '
str = str + 'VIEWASTEXT>'
str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
str = str + '<PARAM NAME=quality VALUE=high>'
str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
str = str + '<EMBED ';
str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
str = str + 'quality=high '
// str = str + 'bgcolor=#FFFCDA '
str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
str = str + 'ALIGN="center" '
str = str + 'TYPE="application/x-shockwave-flash" '
str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
str = str + '</EMBED>'
str = str + '</OBJECT>'
}else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
str = str + '<img id="bannerauto" src="'+this.aNodes[iCtr].bannerPath+'" ';
str = str + 'border="0" ';
str = str + 'height="'+this.aNodes[iCtr].height+'" ';
str = str + 'width="'+this.aNodes[iCtr].width+'">';
}

if (this.aNodes[iCtr].hyperlink != ""){
str = str + '</a>';
}

str += '</span>';
}
return str;
};

// START THE BANNER ROTATION
Banner.prototype.start = function(){
var thisBannerObj = this.obj;
// CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
this.changeBanner();
}

// CHANGE BANNER
Banner.prototype.changeBanner = function(){
var thisBanner;
var prevBanner = -1;
if (this.currentBanner < this.aNodes.length ){
thisBanner = this.currentBanner;
if (this.aNodes.length > 1){
if ( thisBanner > 0 ){
prevBanner = thisBanner - 1;
}else{
prevBanner = this.aNodes.length-1;
}
}
if (this.currentBanner < this.aNodes.length - 1){
this.currentBanner = this.currentBanner + 1;
}else{
this.currentBanner = 0;
}
}


if (prevBanner >= 0){
document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
}
document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}

[/javascript]


Dans votre page php

[javascript]// NE PAS OUBLIER D'INCLURE LE FICHIER JAVASCRIPT ENTRE LES BALISES <HEAD>
<script type="text/javascript" src="banner.js" /></script>[/code]

echo "<script language=\"javascript\">
banner1 = new Banner('banner1');";

// Requete pour aller chercher les éléments dans la table
$req_banner="SELECT * FROM $CfgTableBanner WHERE actif='y' ORDER BY ordre ASC";
$res_banner=mysql_query($req_banner) or die("Erreur SQL!"); 

/* Les champs composant la table des bannières sont :

- actif  ==> structure : varchar(1) ==> valeur : y/n (permet de créer des bannières pour les publier plus tard)
- ordre ==> structure : int(4) ==> valeur : numérique (permet de définir l'ordre de passage des bannières)
- type ==> structure : varchar(5) ==> valeur : IMAGE/FLASH (nécessaire pour afficher une bannière image -IMAGE ou flash - FLASH)
- description ==> structure : varchar(255) ==> valeur : petite description de la bannière pour usage interne (pas nécessaire)
- banner ==> structure : varchar(50) ==> valeur : nom de la bannière (ex: banniere.swf ou banner.jpg)
- timing ==> structure : int(3) ==> valeur : numérique (temps d'affichage de la bannière - en secondes)
- url ==> structure : varchar(300) ==> valeur : lien de la bannière
*/


// On va rechercher les éléments et on les attribue
while ($row = mysql_fetch_array ($res_banner)) {
$type = $row['type']; // Type : FLASH ou IMAGE
$banner = $row['banner']; //Exemple: banner.swf ou banner.jpg
$timing = $row['timing']; // Temps d'affichage de la bannière
$url = $row['url']; // Lien de la bannière (pour les images et éventuellement flash suivant paramètrage de flash)

$CfgDir_Medias = 'medias'; // Dossier des medias (images, bannières, ...)
$CfgDir_Banners = 'banners'; // Dossier des bannières
$Banner_Height = 60; // Hauteur de la bannière
$Banner_Width = 480; // Largeur de la bannière

// On ajoute les bannières trouvées
echo "banner1.add(\"".$type."\", \"".$CfgDir_Medias."/".$CfgDir_Banners."/".$banner."\", ".$timing.", ".$Banner_Height.", ".$Banner_Width.",\"".$url."\");";
}

echo "document.write(banner1);
banner1.start();
</script>";

Et pour finir : la feuille de style CSS :