salut a tous, je viens vous solliciter pour vous expliquer mon problème. Débutant en script, j'essaye de mettre en place, un bandeau vertical à droite de ma page web, qui accueillera un diaporama d'image .jpg avec transition en fondu. De plus je souhaite pouvoir mettre un lien pour chaque images qui défilent. Afin je souhaiterai que ce diaporama suive le scroll vertical de la page.
J'en suis à la première étape, et c'est déjà la galère. J'ai récupéré le fichier script:javascriptfr_DIAPO-FONDU-ENCHAINE.
Mais lorsque je l'intègre tel que ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
tbimage=new Array('bateau','peli','bateau2','dauphin','crabe','oiseau') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=100;
var compteur=1
var vitesse=2000
function precharge() {
for (i = 0; i < tbimage.length; i++) {
preImages[i] = new Image()
preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}
function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="images/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');
opaa+=3;
opab-=4;
if(document.all && !window.opera){
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
}
else{
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",30);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>
<body>
<div id="divconteneur"STYLE="position:absolute;top:0 px;left:10px;">
<img id='divimagea' src="WA_INTERN_URL[bateau.jpg]" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb'src="WA_INTERN_URL[peli.jpg]" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
</body>
</html>
je n'obtiens que deux images qui s'enchainent. De plus lorsque l'enchainement arrive à terme la première reste affiché une demi seconde et passe à la suivante.
Pour intégrer un lien vers une page, je n'ai pas trouver encore le script, je recherche encore.
Enfin pour le déplacement j'ai trouvé ces infos: javascriptfr_DIV-SUIT-SCROLLING-PAGE, mais la c'est encore du chinois.
Je ne sais pas si je part sur la bonne solution, ou si il existe des choses plus facile a mettre en place, en tous les cas je suis preneur de toutes les remarques.
Bien Merci à vous.