1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Apparition d'images en mosaïque

Apparition d'images en mosaïque

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 939 fois - Téléchargée 29 fois

Commenter

Contenu du snippet

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>

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
1
Date d'inscription
jeudi 16 novembre 2006
Statut
Membre
Dernière intervention
2 décembre 2006
salut !
je suis le tout nouveau sur ce site que je trouve
formidable
et je tiens à remercier l'auteur de ce sript
je voudrais (si tu le permet ) te poser quelques questions concernant ton script
1) est ce que c'est possible d'ajouter du texte sur les images

2) est ce qu'il est possible d'ajouter un lien hypertexte pour chacune des images

3) et enfin serait t-il possible d'afficher ces images à partir d'une base de données ACCESS

MERCI BEAUCOUP DE ME REPONDRE

NB: Si tu veux la prochaine fois je t'expliquerais
pourquoi toutes ces questions.

encore une fois ton script est formidable BON COURAGE
Signaler
Messages postés
6
Date d'inscription
samedi 26 août 2006
Statut
Membre
Dernière intervention
4 septembre 2006
Bonjour ! super sympas ce script !!!! Une question : j'ai testé avec des images un peu plus grandes que celles que tu utilises (500X500 Pixels) et l'effet mosaique est aleatoire, parfois il apparait un peu, parfois aps du tout. J'ai essayé de régler les timeouts, mais sans succès. Une suggestion ?

Encore bravo pour ce travail !

John
Signaler
Messages postés
35
Date d'inscription
vendredi 20 février 2004
Statut
Membre
Dernière intervention
11 mai 2007
est il possible de forcer les images à une taille précise ?
merci d'avance
Signaler
Messages postés
101
Date d'inscription
vendredi 30 août 2002
Statut
Membre
Dernière intervention
5 novembre 2004
Merci mariegendron :o)
ca fait plaisir :o)
Signaler
Messages postés
2
Date d'inscription
mardi 14 janvier 2003
Statut
Membre
Dernière intervention
25 novembre 2003
Bonjour et merci racncktfr de mariepanic!

Je viens d'installer votre script que vous pouvez voir en action sur la page (http://www.rg3.ca/index.html) et je vous remercie car ce code fonctionne excellemment!

Je vais sûrement garder un oeil sur vos sources!

Bonne journée!
mariepanic
http://www.mariepanic.com/
http://www.rg3.ca/index.html
Afficher les 9 commentaires
S'inscrire maintenant

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.

Du même auteur (francktfr)