Une bannière défilante avec changement de sens et arret.

Commenter

Contenu du snippet

Ce script permet de reproduire, en quelque sorte la balise "Marquee" d'IE, mais valable pour N4.7 et + et IE4 et +...; tout en l'améliorant un peu.
      • Mise a jour : j'ai supprimé la partie gérant NN4.7 et modifier les parties gérant IE et Mozilla***

C'est a dire changement de sens, et arret quand la souris passe sur le message défilant.
Le script ne fait pas appel au <marquee> ou au <ilayer src> et <iframe src>

Source / Exemple : 


<!--
//***************************************************************************
//***************************** MADE BY ALTI *********************************
//***************************************************************************/
// modifié le 10/01/2005

messages = new Array();

// pour le tableau de donnée source (données défilantes) il est possible de formatter l'affichage via des balises styles comme ci dessous!
messages[0]="<span style='background-color:green;color:white;vertical-align:bottom'> Accor </span><img src='/alti/images/btn_droit.gif' style='width:16px;height:16px'>";
messages[1]=" Thales <img src='/alti/images/btn_gauche.gif' style='width:16px;height:16px'>";
messages[2]=" AGF <img src='/alti/images/btn_bas.gif' style='width:16px;height:16px'>";
messages[3]=" Air liquide <img src='/alti/images/btn_haut.gif' style='width:16px;height:16px'>";
messages[4]=" Alcatel <img src='/alti/images/boule_h.gif' style='width:16px;height:16px'>";
messages[5]=" Alstom";
messages[6]=" Aventis";
messages[7]=" Axa";
messages[8]=" BNP";
messages[9]=" Bouygues";
messages[10]=" Cap Gemini";
messages[11]=" Carrefour";
messages[12]=" Crédit Lyonnais";
messages[13]=" Groupe Casino";
messages[14]=" Dexia";
messages[15]=" Equant";
messages[16]=" France Telecom";
messages[17]=" L'Oréal";
messages[18]=" Lafarge";
messages[19]=" Lagardère";
messages[20]=" LVMH";
messages[21]=" Peugeot";
messages[22]=" PPR Group";
messages[23]=" Renault";
messages[24]=" Saint Gobain";
messages[25]=" Sanofi Synthelabo";
messages[26]=" Schneider Electric";
messages[27]=" Société générale";
messages[28]=" ST";
messages[29]=" Suez Lyonnaise des Eaux";
messages[30]=" TF1";
messages[31]=" Total Fina Elf";
messages[32]=" Valeo";
messages[33]=" Eads";
messages[34]=" Thomson mm";
messages[35]=" Vivendi";
messages[36]=" Michelin";
messages[37]=" Dassault";
messages[38]=" Danone";
messages[39]=" Sodexho";

if (messages.length>1) i=2
else i=0

divWidth=300;
divHeight=20;
//function pour IE
function moveAll(whichdiv,autre,sig,speed,offsetW){
tdiv=eval(whichdiv);
adiv=eval(autre);
tdivstyle=tdiv.style;
adivstyle=adiv.style;
gauche="pixelLeft";
signe=(eval("sig")=='neg')?-1:1
if (eval("parseInt(tdivstyle."+gauche+")")==parseInt(signe)){
    tdivstyle.left=0;
    actu=setTimeout("moveAll(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed)
    return actu
}
if (signe==1) ppp="parseInt(tdivstyle."+gauche+")>=(offsetW*-1)+1"; else ppp="parseInt(tdivstyle."+gauche+")<=offsetW+1";
if (eval(ppp)){
    position=eval("parseInt(tdivstyle."+gauche+")-parseInt(signe)");
    tdivstyle.pixelLeft=position;
} else {
    position=eval((divWidth*parseInt(signe)));
    tdivstyle.pixelLeft=position;
    tdiv.innerHTML=messages[i];
if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
};
if (signe==1) ppp="parseInt(adivstyle."+gauche+")<=(offsetW*-1)+1"; else ppp="parseInt(adivstyle."+gauche+")>=offsetW+1";
if (eval(ppp)){
    position=eval(divWidth*parseInt(signe));
    adivstyle.pixelLeft=position;
    adiv.innerHTML=messages[i];
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
} else {
    position=eval(parseInt(adivstyle.left)-parseInt(signe));
    adivstyle.pixelLeft=position;
}
actu=setTimeout("moveAll(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed)
return actu
}
//function pour DOM complient hors IE
function moveById(whichdiv,autre,sig,speed,offsetW){
tdiv=eval(whichdiv);
adiv=eval(autre);
tdivstyle=tdiv.style;
adivstyle=adiv.style;
gauche="left";
signe=(eval("sig")=='neg')?-1:1
if (eval("parseInt(tdivstyle."+gauche+")")==parseInt(signe)) {
    tdivstyle.left=0+"px";
    actu=setTimeout("moveById(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed);
    return actu;
}
if (signe==1) ppp="parseInt(tdivstyle."+gauche+")>=(offsetW*-1)+1"; else ppp="parseInt(tdivstyle."+gauche+")<=offsetW+1";
if (eval(ppp)){
    position=eval("parseInt(tdivstyle."+gauche+")-parseInt(signe)");
    tdivstyle.left=position+"px";
  if(eval("parseInt(tdivstyle."+gauche+")==offsetW-"+divWidth+"+1") && signe==-1) {
    doc = document.getElementById("div1");
    doc.innerHTML=eval("messages["+i+"]");
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
  }
} else {
    position=eval((divWidth*parseInt(signe)));
    tdivstyle.left=position+"px";
  if(signe==1) {
    doc = document.getElementById("div1");
    doc.innerHTML=eval("messages["+i+"]");    
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
  }
};
if (signe==1) ppp="parseInt(adivstyle."+gauche+")<=(offsetW*-1)+1"; else ppp="parseInt(adivstyle."+gauche+")>=offsetW+1";
if (eval(ppp)){
    position=eval(divWidth*parseInt(signe));
    adivstyle.left=position+"px";
if (signe==1) {
    doc = document.getElementById("div2");
    doc.innerHTML=eval("messages["+i+"]");
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
    }
} else {
    position=eval(parseInt(adivstyle.left)-parseInt(signe));
    adivstyle.left=position+"px";
if (eval("parseInt(adivstyle."+gauche+")==offsetW-"+divWidth+"+1") && signe==-1) {
    doc = document.getElementById("div2");
    doc.innerHTML=eval("messages["+i+"]");
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
}
}
actu=setTimeout("moveById(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed)
return actu
}

var divok=0;

function tourne(lesens) {
sens=lesens

if (lesens=='neg') {
switch(i) { case 0: i=messages.length-4; break; case 1: i=messages.length-3; break; default : i-=3; break; }
} else {
if (i==(messages.length-1)) i=0;
else if (i==(messages.length-2)) i=messages.length-1;
else i+=1;

}
one=(one==1)?2:1
stopmove();
startmove();
}

function stopmove() { clearTimeout(actu); }

function startmove() {
two=(one==1)?2:1
if (document.all) {
actu=setTimeout("moveAll(div"+one+",div"+two+",'"+sens+"',vitesse,divWidth)",vitesse);
} else if (document.getElementById) {
actu=setTimeout("moveById(document.getElementById('div"+one+"'),document.getElementById('div"+two+"'),'"+sens+"',vitesse,divWidth)",vitesse);
}

return actu
}

function startscroll() {
if (document.all) {
document.all('div1').style.pixelLeft=1;
document.all('div2').style.pixelLeft=divWidth;
document.all('div2').style.visibility='visible';
actu=moveAll('div1','div2',sens,vitesse,divWidth);
} else if (document.getElementById) {
document.getElementById('div1').style.left=1+"px";
document.getElementById('div2').style.left=divWidth+"px";
document.getElementById('div2').style.visibility='visible';
actu=moveById(document.getElementById('div1'),document.getElementById('div2'),sens,vitesse,divWidth);
}
return actu
}
document.writeln("<st"+"yle type=text/css>");

st="#monid {width:"+divWidth+"px;height:"+divHeight+"px;position:relative;top:0px;background-color:green}\n";
st+="#theid {overflow:hidden;clip:rect(0 "+divWidth+" "+divHeight+" 0);left:0px;top:0px;background-color:red;}\n";
st+="#theid {position:absolute;width:"+divWidth+"px;height:"+divHeight+"px;}\n";
st+="#div2 {position:absolute;width:"+divWidth+"px;left:0px;height:"+divHeight+"px;top:0px;visibility:hidden;color:#FF5555;text-align:center;}\n";
st+="#div1 {position:absolute;width:"+divWidth+"px;left:1px;height:"+divHeight+"px;top:0px;color:blue;font-family:Verdana;font-weight:bold;text-align:center;}\n";
st+=".turn {font-size:48px;color:black;text-decoration:none;}\n";
document.writeln(st);
document.writeln("</st"+"yle>")
if (document.layers ) {

document.write("<table cellpadding=0 cellspacing=0 border=0 width="+eval(divWidth+30)+"><tr><td><a ");
document.write("href=\"javascript:void(tourne('egal'))\" class=\"turn\"><</a></td><td>");
document.write("<ilayer id=\"main\" width="+divWidth+" height=28 top=0 left=0 bgcolor=#FAFAFA visibility=hide>");
document.write("<layer id=\"layer1\" top=0 left=1 width="+divWidth+" onmouseover=\"stopmove()\"   onmouseout=\"startmove()\">");
document.write(messages[0]);
document.write("</layer>");
document.write("<layer id=\"layer2\" left=0 top=0 width="+divWidth+" visibility=hide onmouseover=\"stopmove()\"   onmouseout=\"startmove()\">");
document.write(messages[1])
document.write("</layer>");
document.write("</ilayer>");
document.write("</td><td><a ");
document.write("href=\"javascript:void(tourne('neg'))\" class=\"turn\">></a></td></tr></table>");
} else {

st2="<table cellpadding=0 cellspacing=0 border=0 width="+eval(divWidth+45)+"><tr><td width=15>&nbsp;</td><td width=15><a \n";
st2+="href=\"javascript:void(tourne('egal'))\"  class=\"turn\"><</a></td><td width="+divWidth+">\n";
st2+="<div id=\"monid\" >\n";
st2+="<div id=\"theid\"   >\n";
st2+="<div id=\"div1\"  onmouseover=\"stopmove()\"  onmouseout=\"startmove()\">\n";
document.writeln(st2);
if (document.all) { document.write(messages[0])
} else {
d = document.getElementById("div1");
d.innerHTML=messages[0];
}
document.write("</div>")
document.writeln("<div id=\"div2\" onmouseover=\"stopmove()\"   onmouseout=\"startmove()\">")
if (document.all) { document.write(messages[1]);
}else {
d = document.getElementById("div2");
d.innerHTML=messages[1];
}
document.write("</div>")
document.writeln("</div>")
document.write("</div>");
document.write("</td><td width=15><a ");
document.write("href=\"javascript:void(tourne('neg'))\"  class=\"turn\">></a></td></tr></table>");

}
divok=1; //I use this divok to be sure that all the script is loaded before starting
sens='egal';    //  initializing direction sense
one=1           //this is the number of the first 'div' for the changing sense
vitesse=10; // speed

actu=setTimeout('startscroll()',300);
//-->

Conclusion :


Je sais que le DOM ne préconise pas encore l'utilisation de innerHTML, mais c'est un tel raccourcis!!! et maintenant firefox le gère correctement! (non testé sur opéra)

pour le voir fonctionner il suffit d'aller le voir sur http://alti.free.fr/
section examples!

alti

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.