Pb d'actualisation

Bonjour,

Je m'occupe du site http://www.laprod.fr et j'ai mis en place un systeme de News convivial. Des images tournent, pointent vers un lien etc... allez voir le site pour vous rendre compte du seul pb qu'il me reste à regler.

En effet, j'ai ajouté sur ces news en image des infobulles (je précise que j'ai déjà uploadé un post similaire, sauf que maintenant j'ai un script bien disctinct pour les infobulles type "News" et les autres->sinon conflit)

Bref voiçi le code source de mon système de News :


<SCRIPT language="javascript">
ejs_banurl = new Array;
ejs_banimageUrl=new Array;
ejs_infobulle=new Array;
ejs_infobulle2=new Array;

ejs_banimageUrl[0] = "news/PreVaUnan.gif";
ejs_banurl[0] = "http://www.laprod.fr/francais/desfougeres/vaunan/3_1-vaunan.htm";
ejs_infobulle[0] = "<FONT size=2><CENTER><B><U>12 SEPTEMBRE 2005</U></B></CENTER></FONT>";
ejs_infobulle2[0] = "<FONT size=2><CENTER>DESFOUGERES<BR><B>Vidéo de Va Unan</B></CENTER></FONT>";

ejs_banimageUrl[1] = "news/BleRoy.gif";
ejs_banurl[1] = "http://www.laprod.fr/francais/tourisme/restauration/creperie/LeBleDuRoy.htm";
ejs_infobulle[1] = "<FONT size=2><CENTER><B><U>20 AOUT 2005</U></B></CENTER></FONT>";
ejs_infobulle2[1] = "<FONT size=2><CENTER>RESTAURANT-CREPERIE <BR><B>Le Blé du Roy</B></CENTER></FONT>";

ejs_banimageUrl[2] = "news/Passeport.gif";
ejs_banurl[2] = "http://www.laprod.fr/francais/laprod/production/passeport.htm";
ejs_infobulle[2] = "<FONT size=2><CENTER><B><U>04 AOUT 2005</U></B></CENTER></FONT>";
ejs_infobulle2[2] = "<FONT size=2><CENTER>PRODUCTION <BR>l&acute;<B>Orchestre Passeport</B></CENTER></FONT>";

ejs_banimageUrl[3] = "news/GLG.gif";
ejs_banurl[3] = "http://www.laprod.fr/francais/arts/photographie/glg.htm";
ejs_infobulle[3] = "<FONT size=2><CENTER><B><U>28 JUILLET 2005</U></CENTER></FONT>";
ejs_infobulle2[3] = "<FONT size=2><CENTER>PHOTOGRAPHIE<BR><B>G. Le Gallo</B></CENTER></FONT>";

affiche = false;

function AffichePub()
{
if(!affiche)
{
numimage= Math.round(Math.random()*(ejs_banurl.length-1));
document.write ('<A HREF="#" onclick="window.open(ejs_banurl[numimage],\'_self\')"><IMG SRC="' + ejs_banimageUrl[numimage] + '" title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[' + ejs_infobulle[numimage] + '] body=[' + ejs_infobulle2[numimage] + ']" BORDER=0 NAME=ejs_banpub ></A>')
affiche = true;
}
else
{
if(numimage == (ejs_banurl.length-1))
numimage = 0;
else
numimage++;
document.ejs_banpub.src=ejs_banimageUrl[numimage];
}
setTimeout("AffichePub()",5000);
}
AffichePub();
</SCRIPT>


Comme vous pouvez le constater, les infobulles ne s'actualisent pas en même tps que l'image change. L'infobylle-news garde la valeur de la première variable qu'elle rencontre... Et c'est ça le point noir ! Je pense qu'il faut rejouter une instruction à la fin dans le 2ème 'else'.

Merci de me filer un coup de main, je montre içi mes limites.


________________
Guillaume

document.ejs_banpub.src=ejs_infobulle[numimage];

Là, tu changes l'attribut src de l'image, et seulement celui là, donc c'est normal que l'infobulle reste le même. Il faut que tu change aussi l'attribut title de l'image:

document.ejs_banpub.title = "cssbody=[dvbdy1] cssheader=[dvhdr1] header=[' + ejs_infobulle[numimage] + '] body=[' + ejs_infobulle2[numimage] + ']"

Je pense que ca devrait marcher avec ca.

Ordinastie.

PS: merci grace à toi, j'ai appris qu'on pouvait formatter l'attribut title, je savais pas .

Merci Oridnastie... mais ça ne marche pas (d'ailleurs j'y étais déjà venu à cette solution) !

Cette actualisation de l'infobulle pose des pb, personne ne sait comment faire, d'ailleurs je commence à me demander si c'est possible.

Je ne vois + comment faire..

Par contre, je ne vois pas à quel endroit dans ton code tu demandes d'afficher/cacher la tool tip pour la pub?

Aussi, je comprends pas le "title" et sa syntaxe en fait. Si tu pouvais m'éclairer sur ce point là?

Euh...ok, je ne sais pas si je captes tout mais j'essaye de t'éclairer :

il y un bout de code en Javascript inséré à l'endroit ou tu vois la TV (les news en fait) là les images tournent & pointent vers un lien. Le truc complexe c'est que cela combine un 2ème script qui lui s'occupe des infobulles.

Si tu veux tout le code tu n'as qu'à te rendre sur la page en question :
http://www.laprod.fr

et là tu affiches la source de la page.

Merci qd-même !

C'est là que je décroche, je vois nulle part un onmouseover/onmouseout pour l'infobulle de la pub. Il est défini pour les autres éléments de la page, mais pas pour celui là. Ou alors, je sais pas ou.
De meme, le code qu'il y a dans le title qui permet de faire la mise en forme, j'ai jamais vu ca et j'ai essayé de tester un truc dans le genre, mais ca marche pas.
Donc si t'es capable de me dire où est appelée l'affichage de la div pour la pub, je pourrai ptet plus t'aider =)

Ordinastie

OK !

Rentrons dans le détail des choses, ça va p'tet finir par marcher !! (encore merci en tout cas)

Voilà la partie STYLE dans le <HEAD> (ce que les DIV appellent):

<style>
.thdrcell {
background:#F3F0E7;font-family:arial;font-size:10px;font-weight:bold;padding:5px;border-bottom:1px solid #C8BA92;}
.tdatacell {font-family:arial;font-size:12px;padding:5px;background:#FFFFFF}
.dvhdr1 {background:#F3F0E7;font-family:arial;font-size:12px;font-weight:bold;border:1px solid #C8BA92;padding:5px;width:150px;}
.dvbdy1 {background:#FFFFFF;font-family:arial;font-size:12px;border-left:1px solid #C8BA92;border-right:1px solid #C8BA92;border-bottom:1px solid #C8BA92;padding:5px;width:150px;}
p {margin-top:20px;}
h1 {font-size:13px;}
.dogvdvhdr {width:300;background:#C4D5E3;border:1px solid #C4D5E3;font-weight:bold;padding:10px;}
.dogvdvbdy {width:300;background:#FFFFFF;border-left:1px solid #C4D5E3;border-right:1px solid #C4D5E3;border-bottom:1px solid #C4D5E3;padding:10px;}
.pgdiv {width:160;height:145;background:#E9EFF4;border:0px solid #C4D5E3;padding:10px;margin-bottom:20;font-family:arial;font-size:12px;}
</style>

Mais ce n'est pas tout, il y a un fichier Javascript en src :

<script src="news/boxover.js"></script>    (ICI MAINTENANT)

<div class=tdatacell>
<SCRIPT language="javascript">
ejs_banurl = new Array;
ejs_banimageUrl=new Array;
ejs_infobulle=new Array;
ejs_infobulle2=new Array;

ejs_banimageUrl[0] = "news/PreVaUnan.gif";
ejs_banurl[0] = "http://www.laprod.fr/francais/desfougeres/vaunan/3_1-vaunan.htm";
ejs_infobulle[0] = "<FONT size=2><CENTER><B><U>12 SEPTEMBRE 2005</U></B></CENTER></FONT>";
ejs_infobulle2[0] = "<FONT size=2><CENTER>DESFOUGERES<BR><B>Vidéo de Va Unan</B></CENTER></FONT>";

ejs_banimageUrl[1] = "news/BleRoy.gif";
ejs_banurl[1] = "http://www.laprod.fr/francais/tourisme/restauration/creperie/LeBleDuRoy.htm";
ejs_infobulle[1] = "<FONT size=2><CENTER><B><U>20 AOUT 2005</U></B></CENTER></FONT>";
ejs_infobulle2[1] = "<FONT size=2><CENTER>RESTAURANT-CREPERIE<BR><B>Le Blé du Roy</B></CENTER></FONT>";

ejs_banimageUrl[2] = "news/Passeport.gif";
ejs_banurl[2] = "http://www.laprod.fr/francais/laprod/production/passeport.htm";
ejs_infobulle[2] = "<FONT size=2><CENTER><B><U>04 AOUT 2005</U></B></CENTER></FONT>";
ejs_infobulle2[2] = "<FONT size=2><CENTER>PRODUCTION <BR>l&acute;<B>Orchestre Passeport</B></CENTER></FONT>";

ejs_banimageUrl[3] = "news/GLG.gif";
ejs_banurl[3] = "http://www.laprod.fr/francais/arts/photographie/glg.htm";
ejs_infobulle[3] = "<FONT size=2><CENTER><B><U>28 JUILLET 2005</U></CENTER></FONT>";
ejs_infobulle2[3] = "<FONT size=2><CENTER>PHOTOGRAPHIE<BR><B>G. Le Gallo</B></CENTER></FONT>";

affiche = false;

function AffichePub()
   {
   if(!affiche)
      {
      numimage= Math.round(Math.random()*(ejs_banurl.length-1));
      document.write ('<A HREF="#" onclick="window.open(ejs_banurl[numimage],\'_self\')"><IMG SRC="' + ejs_banimageUrl[numimage] + '"  title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[' + ejs_infobulle[numimage] + '] body=[' + ejs_infobulle2[numimage] + ']" BORDER=0 NAME=ejs_banpub ></A>')
      affiche = true;
      }
   else
      {
      if(numimage == (ejs_banurl.length-1))
         numimage = 0;
      else
         numimage++;
         document.ejs_banpub.src=ejs_banimageUrl[numimage];
      }
   setTimeout("AffichePub()",5000);
   }
AffichePub();
</SCRIPT>
</DIV>


Voiçi le fameux .js en question :

if (typeof document.attachEvent!='undefined') { window.attachEvent('onload',init); document.attachEvent('onmousemove',moveMouse); document.attachEvent('onclick',checkMove);}
else { window.addEventListener('load',init,false); document.addEventListener('mousemove',moveMouse,false); document.addEventListener('click',checkMove,false);}
var oDv=document.createElement("div"); var dvHdr=document.createElement("div"); var dvBdy=document.createElement("div"); var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft; boxOpen=false; ox=10; oy=10; lockX=0; lockY=0; function init() { oDv.appendChild(dvHdr); oDv.appendChild(dvBdy); oDv.style.position="absolute"; oDv.style.visibility='hidden'; document.body.appendChild(oDv);}
function defHdrStyle() { dvHdr.innerHTML='<img  style="vertical-align:middle"  src="info.gif">&nbsp;&nbsp;'+dvHdr.innerHTML; dvHdr.style.fontWeight='bold'; dvHdr.style.width='150px'; dvHdr.style.fontFamily='arial'; dvHdr.style.border='1px solid #A5CFE9'; dvHdr.style.padding='3'; dvHdr.style.fontSize='11'; dvHdr.style.color='#4B7A98'; dvHdr.style.background='#D5EBF9'; dvHdr.style.filter='alpha(opacity=85)'; dvHdr.style.opacity='0.85';}
function defBdyStyle() { dvBdy.style.borderBottom='1px solid #A5CFE9'; dvBdy.style.borderLeft='1px solid #A5CFE9'; dvBdy.style.borderRight='1px solid #A5CFE9'; dvBdy.style.width='150px'; dvBdy.style.fontFamily='arial'; dvBdy.style.fontSize='11'; dvBdy.style.padding='3'; dvBdy.style.color='#1B4966'; dvBdy.style.background='#FFFFFF'; dvBdy.style.filter='alpha(opacity=85)'; dvBdy.style.opacity='0.85';}
var cnt=0; function checkElemBO(txt) { if ((txt.indexOf('header')>-1)&(txt.indexOf('body')>-1)&(txt.indexOf('[')>-1)&(txt.indexOf('[')>-1))
return true; else
return false;}
function scanDOM(curNode) { cnt++; while(curNode) { if (curNode.title) { if (checkElemBO(curNode.title)) { curNode.boHDR=getParam('(?:[^a-zA-Z]header|^header)',curNode.title); curNode.boBDY=getParam('(?:[^a-zA-Z]body|^body)',curNode.title); curNode.boCSSBDY=getParam('cssbody',curNode.title); curNode.boCSSHDR=getParam('cssheader',curNode.title); curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false; curNode.fixX=parseInt(getParam('fixedrelx',curNode.title)); curNode.fixY=parseInt(getParam('fixedrely',curNode.title)); curNode.absX=parseInt(getParam('fixedabsx',curNode.title)); curNode.absY=parseInt(getParam('fixedabsy',curNode.title)); curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10; curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10; if (getParam('doubleclickstop',curNode.title)!='off') { document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);}
if (getParam('singleclickstop',curNode.title)=='on') { document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);}
curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true; curNode.title=''; curNode.hasbox='true';}}
scanDOM(curNode.firstChild); curNode=curNode.nextSibling;}}
function getParam(param,list) { var reg = new RegExp(param+'\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]'); var res = reg.exec(list); var returnvar; if(res)
return res[1].replace('[[','[').replace(']]',']'); else
return '';}
function Left(elem){ var x=0; if (elem.calcLeft)
return elem.calcLeft; var oElem=elem; while(elem){ if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
x+=parseInt(elem.currentStyle.borderLeftWidth); x+=elem.offsetLeft; elem=elem.offsetParent;}
oElem.calcLeft=x; return x;}
function Top(elem){ var x=0; if (elem.calcTop)
return elem.calcTop; var oElem=elem; while(elem){ if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
x+=parseInt(elem.currentStyle.borderTopWidth); x+=elem.offsetTop; elem=elem.offsetParent;}
oElem.calcTop=x; return x;}
var ah,ab; function applyStyles() { if(ab)
oDv.removeChild(dvBdy); if (ah)
oDv.removeChild(dvHdr); dvHdr=document.createElement("div"); dvBdy=document.createElement("div"); curBoxElem.boCSSBDY?dvBdy.className=curBoxElem.boCSSBDY:defBdyStyle(); curBoxElem.boCSSHDR?dvHdr.className=curBoxElem.boCSSHDR:defHdrStyle(); dvHdr.innerHTML=curBoxElem.boHDR; dvBdy.innerHTML=curBoxElem.boBDY; ah=false; ab=false; if (curBoxElem.boHDR!='') { oDv.appendChild(dvHdr); ah=true;}
if (curBoxElem.boBDY!=''){ oDv.appendChild(dvBdy); ab=true;}}
var curSrcElem,iterElem,lastSrcElem,curBoxElem,lastBoxElem, totalScrollLeft, totalScrollTop, width, height ; var ini=false; function SHW() { if (document.body && (document.body.clientWidth !=0)) { width=document.body.clientWidth; height=document.body.clientHeight;}
if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) { width=document.documentElement.clientWidth; height=document.documentElement.clientHeight;}
return [width,height];}
function moveMouse(e) { if (!ini) { scanDOM(document.body.firstChild); ini=true;}
e?evt=e:evt=event; curSrcElem=evt.target?evt.target:evt.srcElement; if ((curSrcElem!=lastSrcElem)&&(!isChild(curSrcElem,dvHdr))&&(!isChild(curSrcElem,dvBdy))){ if (!curSrcElem.boxItem) { iterElem=curSrcElem; while ((!iterElem.hasbox)&&(iterElem.parentNode))
iterElem=iterElem.parentNode; curSrcElem.boxItem=iterElem;}
iterElem=curSrcElem.boxItem; if (curSrcElem.boxItem.title)
if (checkElemBO(curSrcElem.boxItem.title)) { ini=false;}
if (curSrcElem.boxItem&&curSrcElem.boxItem.hasbox) { lastBoxElem=curBoxElem; curBoxElem=iterElem; if (curBoxElem!=lastBoxElem) { applyStyles(); oDv.style.visibility='visible'; if (curBoxElem.IEbugfix) {hideSelects();}
fixposx=!isNaN(curBoxElem.fixX)?Left(curBoxElem)+curBoxElem.fixX:curBoxElem.absX; fixposy=!isNaN(curBoxElem.fixY)?Top(curBoxElem)+curBoxElem.fixY:curBoxElem.absY; lockX=0; lockY=0; boxMove=true; ox=curBoxElem.offX?curBoxElem.offX:10; oy=curBoxElem.offY?curBoxElem.offY:10;}}
else if (!isChild(curSrcElem,dvHdr) && !isChild(curSrcElem,dvBdy) && (boxMove)) { if ((!isChild(curBoxElem,curSrcElem)) || (curSrcElem.tagName!='TABLE')) { curBoxElem=null; oDv.style.visibility='hidden'; showSelects();}}lastSrcElem=curSrcElem;}
else if (((isChild(curSrcElem,dvHdr) || isChild(curSrcElem,dvBdy))&&(boxMove))) { totalScrollLeft=0; totalScrollTop=0; iterElem=curSrcElem; while(iterElem) { if(!isNaN(parseInt(iterElem.scrollTop)))
totalScrollTop+=parseInt(iterElem.scrollTop); if(!isNaN(parseInt(iterElem.scrollLeft)))
totalScrollLeft+=parseInt(iterElem.scrollLeft); iterElem=iterElem.parentNode;}
boxLeft=Left(curBoxElem)-totalScrollLeft; boxRight=parseInt(Left(curBoxElem)+curBoxElem.offsetWidth)-totalScrollLeft; boxTop=Top(curBoxElem)-totalScrollTop; boxBottom=parseInt(Top(curBoxElem)+curBoxElem.offsetHeight)-totalScrollTop; doCheck();}
if (boxMove&&curBoxElem) { bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop; bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft; mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft; mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop; if ((curBoxElem)&&(curBoxElem.windowLock)) { mouseY < -oy?lockY=-mouseY-oy:lockY=0; mouseX < -ox?lockX=-mouseX-ox:lockX=0; mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY; mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;}
oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px"; oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";}}
function doCheck() { if ( (mouseX < boxLeft) || (mouseX >boxRight) || (mouseY < boxTop) || (mouseY > boxBottom)) { oDv.style.visibility='hidden'; if (curBoxElem.IEbugfix) {showSelects();}
curBoxElem=null;}}
function pauseBox(e) { e?evt=e:evt=event; boxMove=false; evt.cancelBubble=true;}
function isChild(s,d) { while(s) { if (s==d)
return true; s=s.parentNode;}
return false;}
var cSrc; function checkMove(e) { e?evt=e:evt=event; cSrc=evt.target?evt.target:evt.srcElement; if ((!boxMove)&&(!isChild(cSrc,oDv))) { oDv.style.visibility='hidden'; if (curBoxElem&&curBoxElem.IEbugfix) {showSelects();}
boxMove=true; curBoxElem=null;}}
function showSelects(){ var elements = document.getElementsByTagName("select"); for (i=0;i< elements.length;i++){ elements[i].style.visibility='visible';}}
function hideSelects(){ var elements = document.getElementsByTagName("select"); for (i=0;i< elements.length;i++){ elements[i].style.visibility='hidden';}}


OUF !!

Moi je me demande comment ca se fait que ton js n'est pas formatté... pas évident pour le lire. Apres formattage de la fonction moveMouse, ca passe de 26 a 90 ligne =)
Enfin bon, c'est pas grave. Donc je crois avoir enfin compris quanb et comment la div était affichée. Donc si je recapitule (et surtout si j'ai compris =) ) ca donne:
les event de mouvements de la souris sont capturés, le script se debrouille pour savoir si l'element survolé a une info bulle à afficher, et si c'est le cas, affiche là div a la position de la souris.
La div etant créée lors du parsing de l'attribut 'title'.

Coupe moi si je me trompe :D

Donc ma premiere idée serait de ne pas prendre l'attribut 'title' mais d'en créer un autre genre 'infobulle' ou tu l'appelles comme tu veux. Pense a changé le nom de l'attribut parsé dans le JS (function scanDOM() je crois), et reprends ma premiere solution:
document.ejs_banpub.infobulle = "cssbody=[dvbdy1] cssheader=[dvhdr1] header=[' + ejs_infobulle[numimage] + '] body=[' + ejs_infobulle2[numimage] + ']"

Sinon, je trouve que c'est un code extrement compliqué sachant que apparement, tu t'en sers qu'une seule fois. (les autres infos bulles ne sont pas gérées comme ca)
Je sais pas si c'est toi qui a ecrit le code, mais ma question est: Pourquoi avoir mis un pseudo-code en attribut pour etre parsé plus loin plutot qu'une bete fonction appellée avec les parametres, et declenchée lors d'un onmouseover?

[je teste ta soluce]

Non, tu te doutes que ce n'est pas moi qui est pondu ça, c'est un gars sur un forum qui me l'a filé, il m'a dit que je pouvais le réutiliser comme je voulais... et maintenant je ne sais pas ce qu'il devient sinon je lui aurait demandé directement.

En fait je me débrouille un peu on va dire (ms toi un peu mx que moi en codage en tout cas!)

@+ Ordinastie