dupliquer le contenu d'une div (faire papier peint)

bonsoir !

je voudrais savoir si il est possible sans faire du copier coller brutale de dupliquer le contenu d'une div horizontalement et verticalement (en faire un motif en gros) un grand nombre de fois.

Par exemple là j'ai une div contenant un tableau de 3x3 (dans chaque case se trouvant une image differente) et je voudrais le dupliquer horizontalement et verticalement (ainsi qu'en diagonale finalement) plein de fois pour en faire un papier peint, et ceux si possible sans faire de copier/coller du contenu de ma div (pour pas me retrouver avec un code de 15km de long)

l'application concrete est de pouvoir se deplacer indéfiniment dans un motif avec la souris, donc en gros a terme ,si je fait simplement du copier coller du code html de ma div je vais me retrouver avec le code d'une page de 20000/20000 px  , c'est pourquoi je suis a la recherche d'une sorte de "feinte" qui m'eviterai d'en arriver la.

quelqu'un aurait il une idée ?

merci pour ta reponse : ) !

je viens de regarder (enfin de m'y remettre, car j'avai deja fait usage de cette fonction il y a quelque temps) et effectivement elle a l'air idéale pour mon affaire.

Cependant apres quelques essais (concluants dans le principe) je suis de nouveau bloqué au niveau de la condition d'execution du cloneNode.

En effet, cloner un element lors d'un clic sur ce meme element fonctionne tres bien, mais ici ça ne colle pas avec mon truc et je ne sais pas trop comment formuler ma condition :
Imaginons, j'ai un element de 800x800 px dans une fenetre de 800x800, et je drag cet element sur la droite, donc a gauche apparait le background de la page. Dans l'idéal c'est a ce moment la que la fonction CloneNode devrait s'executer afin de dupliquer mon element principale a gauche du 1e (que j'ai deplacé) a la maniere d'un motif.

A votre avis, comment pourrais-je formuler cette condition ?

Si tu déplaces un élément en dehors de ton layout, ton document va s'étendre. Surveilles donc ta taille de ton document par rapport a ton élément que tu drag.  Si celui-ci dépasse la taille initiale de ton document, alors tu dupliques ton motif.

encore une fois merci pour ton aide ^^

Je me suis donc mis a chercher des informations a propos des tailles de documents et de la maniere de les surveiller.
Je suis tombé sur 3 methodes différentes, et je ne sais pas exactement laquel correspond a ce qu'il me faudrait, les voici :

(pour la largeur par exemple) :

document.body.clientWidth

ou

document.documentElement.clientWidth

ou

window.innerWidth

a votre avis laquelle serait la plus adaptée ?

ensuite j'ai commencé a essayer d'ecrire ce bout de code, mais je manque vraiment trop d'experience pour batir un code tout seul -_- (je patoge completement entre la syntax que je ne maitrise pas et surtout la logique du js que je ne connais pas tres bien)

en théorie il faudrai est-ce qu'il faudrait ecrire un truc du genre :

 - if "largeur  du doc" > "largeur initiale du doc"

- then add (en utilisant la fonction cloneNode/appendchild) clone de l'element X (mon element a cloner) "dans la partie vide" (partie vide que je ne vois pas du tout comment définir)

j'imagine que je suis très loin du code voulu( (ou meme d'une logique correcte), c'est pourquoi je me demandai si vous connaitriez un exemple d'un fonctionnement plus ou moins similaire auquel je pourrais jeter un oeil pour essayer de comprendre ?

Pour récuperer les dimensions de ton document :

function getDocumentDimensions(){
var docWidth = Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"]);
var docHeight = Math.max(document.documentElement["clientHeight"], document.body["scrollHeight"], document.documentElement["scrollHeight"]);
return {width: docWidth, height: docHeight}
}

A l'initialisation de ta page -> var documentDimensions = getDocumentDimensions();

A chaques mouvements de ton element que tu drag :

function onElementMove(){
var _documentDimensions = getDocumentDimensions();
Si
_documentDimensions.width > documentDimensions.width
Alors
NbreDeClonesACreer = Math.ceil((_documentDimensions.width - documentDimensions.width) / Hauteur_Du_Motif);
Creation_Des_Clones_Sur_L_Axe_X;
Fin

//Pareil pour la hauteur :

Si
_documentDimensions.height > documentDimensions.height
Alors
NbreDeClonesACreer = Math.ceil((_documentDimensions.height - documentDimensions.height) / Hauteur_Du_Motif);
Creation_Des_Clones_Sur_L_Axe_Y;
Fin

documentDimensions = getDocumentDimensions();
}

Désolé les tabulations ne sont pas passées

merci pour ta reponse ! je test ça de suite

Bon, apres de nombreux essais, et ceux malgré ton aide detaillé, je n'y arrive definitivement pas, le javascipt a encore trop de secret pour moi...
C'est pourquoi j'ai revu mon fonctionnement de base différement, afin qu'il soit plus simple dans son elaboration , cependant je suis de nouveau bloqué -_- (mais je dois etre plus proche de la solution qu'auparavant).

Maintenant, tout ce que je cherche a faire, c'est de modifier la largeur d'un element (un layer noir tout simple) en fonction de la position de la souris.
j'ai lu que l'on pouvait modifier tres simplement les proprieté CSS d'un element en js (dont la largeur fait partie), ce qui m'a redonné espoir de faire fonctionner un truc !

donc en gros j'ai un calque noir de 100% de hauteur, collé sur le bord gauche de la page, et dont la largeur est a la base fixé a 10px. Je cherche donc a ce que ce layer s'elargissent en fonction de la position en X de la souris.

j'ai recuperé 2 script, un qui choppe la position de la souris, l'autre qui permet de modifier en direct le css d'un element en fonction d'autre chose.

je les ai groupé, mais apparemment ils ne s'entendent pas très bien... -_-

voila le script actuellement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Document sans nom</title>

<style type="text/css">

<!--

#Layer1 {

    position:absolute;

    height:100%;

    width:10px;

    z-index:1;

    background-color: #000000;

}

-->

</style>

<script type="text/javascript">

var x = 0;

var y = 0;

if (document.getElementById)

   {

   if(navigator.appName.substring(0,3) == "Net")

      document.captureEvents(Event.MOUSEMOVE);

   document.onmousemove = Pos_Souris;

   window.onload = Bouge_Image;

   }

function Pos_Souris(e)

   {

   x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;

   y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;

   }

posX = 0;

posY = 0;

anim = true;

function resize()

{document.getElementById('layer1').style.width=(parseInt(document.getElementById('layer1').clientWidth)+x)+'px';}

</script>

</head>

<body>

<div id="Layer1"></div>

</body>

</html>

auriez-vous une idée de ce que j'aurai pas ou mal fait ?

bonjour
tu veut que la longueur de la div suive la sourie ???