begin process at 2012 05 28 07:47:19
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > APPARITION D'IMAGES EN MOSAÏQUE

APPARITION D'IMAGES EN MOSAÏQUE


 Information sur la source

Note :
8,6 / 10 - par 5 personnes
8,60 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :05/11/2003 Vu :18 591

Auteur : francktfr

Ecrire un message privé
Site perso
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <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>
<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>



 Sources du même auteur

Source avec une capture CHOIX DE DATES ET DE PERIODE
HORLOGE DIGITALE , SI SI
Source avec une capture TEXT COLORISÉ AVEC LE POURCENTAGE
Source avec une capture MENU AVEC EFFET DE DÉGRADÉ
ANNONCE LETTRE PAR LETTRE

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600

Commentaires et avis

Commentaire de LocalStone le 05/11/2003 13:22:43

Je vais étudier ça cet après-midi, mais ça fonctionne superbien et c'est marrant à voir. 10/10

Commentaire de jtreb le 06/11/2003 08:58:09

Ce code fonctionne sûrement très bien mais pour les IE il existe plus simple:
&lt;img id="image_dyna" src="mon_imge.gif"
style="filter:revealTrans(Duration=2,Transition=12)"&gt;
Il y a 23 possibilités de transition!!!

Commentaire de francktfr le 06/11/2003 09:07:42

Justement, c'est pour que ca puisse etre adapté a d'autre navigateur que j'ai fait ce code.
Tu ne m'apprends rien.

Commentaire de jtreb le 06/11/2003 09:49:42

Je m'en doute bien,  mon commentaire est destiné à tous, pas seulement à toi.
Merci pour ce code.



Commentaire de mariegendron le 25/11/2003 07:40:25

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

Commentaire de francktfr le 25/11/2003 08:16:07

Merci mariegendron :o)
ca fait plaisir :o)

Commentaire de Nico52 le 09/05/2006 19:00:23

est il possible de forcer les images à une taille précise ?
merci d'avance

Commentaire de johnscaglione le 01/09/2006 13:38:16

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

Commentaire de saidalias le 02/12/2006 10:37:11

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

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,746 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales