L'exemple est avec des bannières de pub mais
vous pouvez l'utiliser comme slide-show :o)
Les images sont centrées, le tableau utilisé est
de dimension de la plus grande image.
Source / Exemple :
<HTML>
<HEAD>
<TITLE>Apparition d'images en mosaïque</TITLE>
<SCRIPT>
// 05-11-2003 - francktfr@systeme-d.net
// écrit pour http://www.systeme-d.net
var imgs = new Array()
var CellsDone = 0
var Interval = 2000 // Temps entre deux images (ms)
// Définition des images ici :
AddImage("http://daccodac.com/imatges/468x60fr.gif")
AddImage("http://winomail.com/images/ban1.gif")
AddImage("http://www.milimel.com/site/bannieres/ban_2.gif")
function Hide(Index){
CellsDone=0
for (y=0; y<Cache.rows.length; y++){
for (x=0; x<Cache.rows[y].cells.length; x++){ setTimeout("HideCell(" + x + "," + y + "," + Index + ")",(Math.random()*300)) }
}
}
function HideCell( i, j, Index){
CellsDone++
Cache.rows[j].cells[i].style.background = "#FFFFFF"
if (CellsDone >= (Cache.rows.length*Cache.rows[j].cells.length)){
Cache.style.backgroundImage = "url('" + imgs[Index].src +"')"
setTimeout("Show("+Index+")",200)
}
}
function Show(Index){
CellsDone=0
for (y = 0; y < Cache.rows.length; y++){
for (x = 0; x < Cache.rows[y].cells.length; x++){ setTimeout("ShowCell(" + x + "," + y + "," + Index + ")",200+(Math.random()*1000)) }
}
}
function ShowCell( i, j, Index){
CellsDone++
Cache.rows[j].cells[i].style.backgroundColor = "transparent"
if (CellsDone >= (Cache.rows.length*Cache.rows[j].cells.length)){
Index < (imgs.length-1) ? Index++ : Index = 0
setTimeout("Hide("+Index+")",Interval)
}
}
function AddImage(Source){
var img = new Image()
img.src = Source
imgs.push(img)
}
function CreateTable(Container, Dim){
var maxx = 0
var maxy = 0
for(i=0; i<imgs.length; i++){
if (imgs[i].height > maxy){maxy=imgs[i].height}
if (imgs[i].width > maxx){maxx=imgs[i].width}
}
var str = "<TABLE ID=Cache WIDTH="+maxx+" HEIGHT="+maxy+" CELLSPACING=0 CELLPADDING=0 BORDER=0 STYLE=\"table-layout: fixed; background-position: center center; background-repeat: no-repeat\">"
var row ="<TR>"
for (i=0; i<maxx; i += Dim){
str += "<COL WIDTH="+Dim+">"
row += "<TD></TD>"
}
row +="</TR>"
for (i=0; i<maxy; i += Dim){str += row}
Container.innerHTML = str + "</TABLE>"
Hide(0)
}
</SCRIPT>
</HEAD>
<BODY onload="CreateTable(test,10)">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 STYLE="color: white; font: bold 12 Arial; text-align: center; letter-spacing: 2; background: #6699CC">
<TR><TD>Apparition d'images en mosaïque</TD></TR>
<TR><TD ID="test" ALIGN=center></TD></TR>
</TABLE>
</BODY>
</HTML>
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.