je voudrais introduire un descriptif sous forme de layer à l'apparition des images
en gros un descriptif different qui s'affiche a chaque nouvelle image du diaporama
voici ma page :
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<html>
<head>
<title>manifestations</title>
<script>
var imagenames=new Array('images/lapin.jpg','images/manifestations01.jpg','images/manifestations02.jpg','images/manifestations03.jpg','images/manifestations04.jpg','images/manifestations05.jpg','images/manifestations06.jpg','images/manifestations07.jpg','images/manifestations08.jpg','images/manifestations09.jpg','images/manifestations10.jpg','images/manifestations11.jpg','images/manifestations12.jpg','images/manifestations13.jpg','images/manifestations14.jpg','images/manifestations15.jpg','images/manifestations16.jpg','images/manifestations17.jpg','images/manifestations18.jpg','images/manifestations19.jpg','images/manifestations20.jpg','images/manifestations21.jpg','images/manifestations22.jpg','images/manifestations23.jpg','images/manifestations24.jpg','images/manifestations25.jpg');
var yposition=470;
var loadedcolor='#1E99F8' ;
var unloadedcolor='#000000';
var barheight=10;
var barwidth=500;
var bordercolor='black';
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="2" face="sans-serif"><B>CHARGEMENT...</B></font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="2" face="sans-serif"><B>CHARGEMENT...</B></font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;
</script>
<script language="javascript">
<!--
var num = 0
img0 = new Image()
img0.src = "images/lapin.jpg"
img1 = new Image()
img1.src = "images/manifestations01.jpg"
img2 = new Image()
img2.src = "images/manifestations02.jpg"
img3 = new Image()
img3.src = "images/manifestations03.jpg"
img4 = new Image()
img4.src = "images/manifestations04.jpg"
img5 = new Image()
img5.src = "images/manifestations05.jpg"
img6 = new Image()
img6.src = "images/manifestations06.jpg"
img7 = new Image()
img7.src = "images/manifestations07.jpg"
img8 = new Image()
img8.src = "images/manifestations08.jpg"
img9 = new Image()
img9.src = "images/manifestations09.jpg"
img10 = new Image()
img10.src = "images/manifestations10.jpg"
img11 = new Image()
img11.src = "images/manifestations11.jpg"
img12 = new Image()
img12.src = "images/manifestations12.jpg"
img13 = new Image()
img13.src = "images/manifestations13.jpg"
img14 = new Image()
img14.src = "images/manifestations14.jpg"
img15 = new Image()
img15.src = "images/manifestations15.jpg"
img16 = new Image()
img16.src = "images/manifestations16.jpg"
img17 = new Image()
img17.src = "images/manifestations17.jpg"
img18 = new Image()
img18.src = "images/manifestations18.jpg"
img19 = new Image()
img19.src = "images/manifestations19.jpg"
img20 = new Image()
img20.src = "images/manifestations20.jpg"
img21 = new Image()
img21.src = "images/manifestations21.jpg"
img22 = new Image()
img22.src = "images/manifestations22.jpg"
img23 = new Image()
img23.src = "images/manifestations23.jpg"
img24 = new Image()
img24.src = "images/manifestations24.jpg"
img25 = new Image()
img25.src = "images/manifestations25.jpg"
function diapo_suivant(){
if (num <26)
{num = num+1;
document.mon_image.src=eval("img"+num+".src");
}
}
function diapo_precedant(){
if (num >0)
{num = num-1;
document.mon_image.src=eval("img"+num+".src");
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body bgcolor="#000000">
<div align="center"></div>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="707" height="46" background="images/tvweb-haut.jpg"><a href="manifestations.htm"><img src="images/sortie%20tv.gif" width="76" height="46" border="0"></a></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/tvweb-gauche.jpg" width="169" height="280"></td>
<td><img src="images/lapin.jpg" name="mon_image" width="372" height="280"></td>
<td><img src="images/tvweb-droite.jpg" width="166" height="280"></td>
</tr>
</table></td>
</tr>
<tr>
<td width="707" height="174" background="images/tvweb-bas.jpg"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:diapo_suivant()"><img src="images/boutonhaut.gif" width="54" height="28" border="0"></a></td>
</tr>
<tr>
<td><a href="javascript:diapo_precedant()"><img src="images/boutonbas.gif" width="54" height="30" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><
Layer Sur Diaporama
Débuté par arkabal, 29 sept. 2003 12:47
Aucune réponse à ce sujet
Répondre à ce sujet
0 utilisateur(s) li(sen)t ce sujet
0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)
