Ce script montre entre autres, la façon dont on peut :
- modifier le code HTML contenu dans un élément en utilisant sa propriété innerHTML,
- modifier le style d'un élément en utilisant sa propriété style.
Par ailleurs, on utilise ici le player de fichiers flv intitulé FlashPlayer et disponible à l'adresse http://www.jeroenwijering.com. On l'insère grâce à la balise d'inclusion :
<embed width="270" height="250" flashvars="&file=firefox.flvℑ=firefox.jpg&autostart=true" allowfullscreen="true" src="flvplayer.swf" ></embed>
où :
- la valeur de l'attribut src doit être le nom du player,
- la valeur de l'attribut flashvars correspond à une chaîne de caractères dans laquelle vous trouvez le fichier à lire (file), l'image du début (image) et une indication sur le démarrage automatique (autostart).
//************************************************************************************************************************// Gestionnaire d'événements
//************************************************************************************************************************
// Au chargement de la page.
window.onload=initialisation;
function initialisation() {
setHover();
lire_flv('video.flv','page2.jpg','false');
choix=0;
document.getElementById("envoi1").onmouseup=function () { eclairer1('envoi1'); }
document.getElementById("envoi1").onmousedown=function () { foncer1('envoi1'); }
document.getElementById("envoi1").onmouseout= function () { retournormal1('envoi1'); }
document.getElementById("envoi1").onmouseover=function () { choix=1; eclairer1('envoi1'); lire_flv('fichier1.flv','image1.png','false'); }
document.getElementById("envoi1").onclick=function () { lire_flv('fichier1.flv','image1.png','true'); }
document.getElementById("envoi2").onmouseup=function () { eclairer1('envoi2'); }
document.getElementById("envoi2").onmousedown=function () { foncer1('envoi2'); }
document.getElementById("envoi2").onmouseout= function () { retournormal1('envoi2'); }
document.getElementById("envoi2").onmouseover=function () {choix=2; eclairer1('envoi2');lire_flv('fichier2.flv','image2.png','false'); }
document.getElementById("envoi2").onclick=function () {lire_flv('fichier2.flv','image2.png','true'); }
document.getElementById("envoi3").onmouseup=function () { eclairer1('envoi3'); }
document.getElementById("envoi3").onmousedown=function () { foncer1('envoi3'); }
document.getElementById("envoi3").onmouseout= function () { retournormal1('envoi3'); }
document.getElementById("envoi3").onmouseover=function () {choix=3; eclairer1('envoi3'); lire_flv('fichier3.flv','image3.png','false'); }
document.getElementById("envoi3").onclick=function () { lire_flv('fichier3.flv','image3.png','true'); }
document.getElementById("envoi4").onmouseup=function () { eclairer1('envoi4'); }
document.getElementById("envoi4").onmousedown=function () { foncer1('envoi4'); }
document.getElementById("envoi4").onmouseout= function () { retournormal1('envoi4'); }
document.getElementById("envoi4").onmouseover=function () {choix=4; eclairer1('envoi4'); lire_flv('fichier4.flv','image4.png','false');}
document.getElementById("envoi4").onclick=function () { lire_flv('fichier4.flv','image4.png','true');}
document.getElementById("envoi5").onmouseup=function () { eclairer1('envoi5'); }
document.getElementById("envoi5").onmousedown=function () { foncer1('envoi5'); }
document.getElementById("envoi5").onmouseout= function () { retournormal1('envoi5'); }
document.getElementById("envoi5").onmouseover=function () { choix=5; eclairer1('envoi5');lire_flv('fichier5.flv','image5.png','false'); }
document.getElementById("envoi5").onclick=function () { lire_flv('fichier5.flv','image5.png','true'); }
}
//***********************************************************************
// Les trois fonctions suivantes permettent de gérer l'apparence des boutons lumineux.
//***********************************************************************
function foncer1(nom){
document.getElementById(nom).style.background="#0d555b";
document.getElementById(nom).style.border="3px inset #777777";
document.getElementById(nom).style.height="20px";
document.getElementById(nom).style.color="silver";
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById(nom).style.width="30px";
}
}
function retournormal1(nom){
document.getElementById(nom).style.background="#0c2628";
document.getElementById(nom).style.color="#ffffff";
document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById(nom).style.height="16px";
document.getElementById(nom).style.width="26px";
}
document.getElementById('titre').style.background="#0c2628";
document.getElementById('titre').style.color="silver";
if (choix==0){ document.getElementById('titre').innerHTML="";}
if (choix==1){ document.getElementById('titre').innerHTML="Everything...";}
if (choix==2){ document.getElementById('titre').innerHTML="Les navigateurs";}
if (choix==3){ document.getElementById('titre').innerHTML="Alternative";}
if (choix==4){ document.getElementById('titre').innerHTML="Danse du renard";}
if (choix==5){ document.getElementById('titre').innerHTML="Vive le sport";}
}
function eclairer1(nom){
document.getElementById(nom).style.background="#03e903";
document.getElementById(nom).style.color="#222222";
document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById(nom).style.height="16px";
document.getElementById(nom).style.width="26px";
}
if (nom=="envoi1"){ document.getElementById('titre').innerHTML="Everything...";}
if (nom=="envoi2"){ document.getElementById('titre').innerHTML="Les navigateurs";}
if (nom=="envoi3"){ document.getElementById('titre').innerHTML="Alternative";}
if (nom=="envoi4"){ document.getElementById('titre').innerHTML="Danse du renard";}
if (nom=="envoi5"){ document.getElementById('titre').innerHTML="Vive le sport";}
document.getElementById('titre').style.color="#222222";
document.getElementById('titre').style.background="#03e903";
}
//********************************************************************************
// La fonction permettant d'insérer le player player.swf dans le bloc d'identifiant "ecran".
//*********************************************************************************
function lire_flv(file_name,image,etat){
var line="<embed width=\"270\" height=\"250\" flashvars=\"&file="+file_name +"&image=plugins/paramspip/fichiers/dir"+idarticle+"/"+image+"&autostart="+etat+"\" allowfullscreen=\"true\" src=\"plugins/paramspip/fichiers/dir"+idarticle+"/flvplayer.swf\" ></embed>"
document.getElementById("ecran").innerHTML = line;
}