<!-- DEBUT DU SCRIPT -->
<!-- Script provenant de http://www.toulouse-renaissance.net/c_outils/ -->
<script language="JavaScript1.2" type="text/javascript">
/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************
PARAMETRES DE REGLAGE
***********************************************/
var slideshow_width='140px' //ENTREZ LA LARGEUR DE L'IMAGE
var slideshow_height='225px' //ENTREZ LA HAUTEUR DE L'IMAGE
var pause=3000 //ENTREZ LA PAUSE ENTRE CHAQUE IMAGE (3000=3 seconds)
var fadeimages=new Array()
//ENTREZ 1) LE CHEMIN DE L'IMAGE, 2) UN LIEN CLIQUABLE OPTIONNEL SUR L'IMAGE, 3), LE CADRE DE DESTINATION OPTIONNEL :
fadeimages[0]=["../images/photo1.jpg", "", ""] //SYNTAXE COMPLETE DE L'IMAGE
fadeimages[1]=["../images/photo2.jpg", "http://www.google.com", ""] //IMAGE AVEC UN LIEN CLIQUABLE
fadeimages[2]=["../images/photo3.jpg", "http://www.toulouse-renaissance.net/trucs.htm", "_new"] //IMAGE AVEC UN LIEN CLIQUABLE ET UN CADRE DE DESTINATION
fadeimages[3]=["../images/photo4.jpg", "http://www.toulouse-renaissance.net/trucs.htm", "_new"] //IMAGE AVEC UN LIEN CLIQUABLE ET UN CADRE DE DESTINATION
/////NE RIEN EDITER CI-DESSOUS/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}
function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=insertimage(curimageindex)
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
<!-- FIN DU SCRIPT -->
un avis pour une mise en page
pour créer une mise en page d'un site,la page d'accueil.Je présente actuellement 5 photos "statiques" des activitées proposées avec une légende.Je voudrais que chaqu'une de ses images change une fois à l'arrivée sur cette page d'accueil.Par exemple la premiere image qui represente "les balades" démarre sur la couleur du fond du site(bleu) puis apparait l'image,puis de nouveau la couleur du fond du site(bleu)et une autre image,le logo"ballade+une autre photo" et plus rien pour celle ci mais idem en décalé pour les autres images.J'ai essayé en gif,mais j'ai du mal et la page est trés "lourde au téléchargement.Merci pour vos conseils
Maîtresse astucienne
bonne journée
Mon idée est une présentation de 5 images format 184x136 sur ma page d'accueil.ces images devraient effectuer un 