Un texte avec un arriere plan defilant !

Soyez le premier à donner votre avis sur cette source.

Vue 15 255 fois - Téléchargée 1 246 fois

Description

Comme le titre le dit, c'est un texte avec un arrière plan défilant, je m'explique, nous avons deux images qui se superposent, l'image du dessus est votre texte et l'image du dessous et votre fond qui défile de droite à gauche. (j'ai mis un exemple dans le zip).
Le script est très simple à comprendre et ô désespoir, ne marche pas sous mozilla (si quelqu'un peut m'aider pour ce faire, dites-le moi dans les commentaires).

Source / Exemple :


<html>
<head>
<STYLE>
<!--Style css qui fait que les images se chevauchent -->
.textstyle	{
	position:absolute;
	left:-2000px;
}
.bgdivstyle	{
	position:absolute;
	left:-2000px;
}
</STYLE>
<SCRIPT>
<!-- 

// Url de votre image texte
var textimage="imagetexte.gif"

// Url de l'image d'arriere plan
// /!\ Elle doit avoir la même hauteur que le texte-image. /!\
var bgimage="imagefond.jpg"

// La hauteur du texte image (en pixels).
var textimageheight=206

// La largeur de l'image texte
var textimagewidth=359

// La largeur de l'image d'arrière-plan.
// Au minimum la largeur du texte-image. Plus large est souhaitable.
var bgdivwidth=1200

// Distance entre votre image et le bord supérieur de la page
var textimagetop=10

// Distance entre votre image et le bord droit de la page.
var textimageleft=10

// La vitesse de l'animation.
// Plus la valeur est petite, plus l'animation sera lente
var step=5

/////////////////////////////////////////////////////////
///////////// A partir de la pas toucher ! //////////////
/////////////////////////////////////////////////////////
var imgpreload=new Image()
imgpreload.src=textimage

var bgimgpreload=new Image()
bgimgpreload.src=bgimage

var bgdivtop=textimagetop
var bgdivleft=textimageleft
var bgdivheight=textimageheight
var cliptop=0
var clipright=textimagewidth
var clipbottom=bgdivheight
var clipleft=0
var clippoints
var contentbg=""
var pause=50
var timer

function init() {
	clipleft=0
	clipright=textimagewidth
	contentbg="<table cellpadding=0 cellspacing=0 border=0><tr>"
	contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+textimageheight+"'></td>"
	contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+textimageheight+"'></td>"
	contentbg+="<td><img src='"+bgimage+"' border='0' width='"+bgdivwidth+"' height='"+textimageheight+"'></td>"
	contentbg+="</tr></table>"
	
    if (document.all) {
	bgdiv.innerHTML=contentbg
	text.innerHTML="<img src='"+textimage+"' border='0' width='"+textimagewidth+"' height='"+textimageheight+"'>"
	document.all.text.style.posTop=textimagetop
        document.all.text.style.posLeft=textimageleft
        document.all.bgdiv.style.posTop=bgdivtop
        document.all.bgdiv.style.posLeft=bgdivleft
        movebackground()
    }
	
	if (document.layers) {
	document.bgdiv.document.write(contentbg) 
	document.bgdiv.document.close() 
	document.text.document.write("<img src='"+textimage+"' border='0' width='"+textimagewidth+"' height='"+textimageheight+"'>") 
	document.text.document.close() 
	document.text.top=textimagetop
        document.text.left=textimageleft
        document.bgdiv.top=bgdivtop
        document.bgdiv.left=bgdivleft 
        movebackground()
    }
}

function restart() {
	clipleft=0
	clipright=textimagewidth
        if (document.all) {
        document.all.bgdiv.style.posLeft=bgdivleft
        }	
	if (document.layers) {
        document.bgdiv.left=bgdivleft         
        }
	movebackground()
}

function movebackground() {
if (document.all) {
    if (document.all.bgdiv.style.posLeft >=(-bgdivwidth+textimagewidth+bgdivleft+step)) {   
        clipleft+=step
        clipright=clipleft+textimagewidth
        clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
	document.all.bgdiv.style.clip=clippoints
        document.all.bgdiv.style.posLeft-=step
        timer= setTimeout("movebackground()",pause)
    }
    else {
        clearTimeout(timer)
        text.innerHTML="<img src='"+textimage+"' border=0>"
        restart()
    }
}
if (document.layers) {
	if (document.bgdiv.left >=(-bgdivwidth+textimagewidth+bgdivleft+step-22)) {   
        clipleft+=step
        clipright=clipleft+textimagewidth
	document.bgdiv.clip.top=cliptop
	document.bgdiv.clip.left=clipleft
	document.bgdiv.clip.bottom=clipbottom
	document.bgdiv.clip.right=clipright
        document.bgdiv.left-=step
        timer= setTimeout("movebackground()",pause)
    }
    else {
        clearTimeout(timer)             
        document.text.document.write("<img src='"+textimage+"' border=0>") 
	document.text.document.close()  
        restart()
    }
}
}
// -->
</SCRIPT>
<title>Un texte avec un arrière plan défilant !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="init()">
<DIV ID="bgdiv" class="bgdivstyle"></DIV>
<DIV ID="text" class="textstyle"></DIV>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Pour pour faire 
  l'image du dessus (l'image du texte) il vous suffit avec nimporte quel logiciel 
  de retouche de photos de prendre une image vierge blanche et d'inscrire votre 
  texte à la gomme dessus.</font></p>

</body>
</html>

Conclusion :


Pour pour faire l'image du dessus (l'image du texte) il vous suffit avec nimporte quel logiciel de retouche de photos de prendre une image vierge blanche et d'inscrire votre texte à la gomme dessus.

Tous est dans le zip avec un exemple.
Voir l'exemple : http://sectioneurope.free.fr/javascriptfr/test.htm

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
23
Date d'inscription
lundi 26 septembre 2005
Statut
Membre
Dernière intervention
30 septembre 2005

moi je dis bravo je n'y aurai jamais pensé
Messages postés
275
Date d'inscription
mercredi 11 août 2004
Statut
Membre
Dernière intervention
15 décembre 2005

ccim.be montre une source qui vien d'un autre site dont la source vient de moi.
Voila tout mais la source est bien de moi !
Messages postés
1
Date d'inscription
samedi 25 décembre 2004
Statut
Membre
Dernière intervention
2 mars 2005

déjà vu ce script avec la même image qui defile sur un site il y a 2 ou 3 ans sur ccim.be section dhtml texte.

Donc ça pue la récup
Messages postés
275
Date d'inscription
mercredi 11 août 2004
Statut
Membre
Dernière intervention
15 décembre 2005

Merci a tous ! et sinon, toujours pas de solution pour mozilla ???
Messages postés
121
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
10 mars 2006

Enfin quelqu'un comme moi qui a 13 ans :D

Sinon jolie source, et surtout le code est propre à souhait :)
Afficher les 10 commentaires

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.