UN TEXTE AVEC UN ARRIERE PLAN DEFILANT ! , Source N°28750

Information sur la source

Catégorie :Graphique Niveau : Débutant Date de création : 10/01/2005 Date de mise à jour : 11/01/2005 12:35:10 Vu / téléchargé: 10 663 / 964

Auteur : la_pin

Site perso

Ecrire un message privé

Note :

7,80 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (10)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<html>
<head>
<STYLE>
.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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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>

<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&egrave;re plan d&eacute;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 &agrave; 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

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

imagefond.jpg 12 668 octets
imagetexte.gif 1 783 octets
test.htm 5 028 octets

Télécharger le zip

Historique

11 janvier 2005 12:35:12 :: Correction de quelques fotes dortografe et de quelques bugs dans le code.

Sources du même auteur

Toutes les sources de la_pin

Sources de la même categorie

Toutes les sources de la catégorie Graphique

Commentaires

Commentaire de ThunderPsycho le 11/01/2005 08:59:12

C vraiment pas mal...
Pour ton problème avec mozilla, dsl g pas de réponse

8/10
Commentaire de glad le 11/01/2005 09:24:06

hello,

Je ne suis pas assez calé en javascript pour juger de la qualité du code, mais je trouve ça sympa comme source !

Alors je te mets 9/10
A+
Commentaire de la_pin le 11/01/2005 12:37:39

HoaHoo, je suis trop content, je pensai vraiment pas avoir des commentaires aussi positifs pour ma première source, d'autant plus que je n'ai que 13ans...
Commentaire de jjdagadir le 11/01/2005 12:54:57

Oui, c'est bon et simple et l'effet est sympa.
Bravo la_pin, continues.
Kenavo
Commentaire de ThunderPsycho le 11/01/2005 13:21:41

y a pas d'âge pour bien faire les choses ;o)
Commentaire de WindPowa le 12/01/2005 00:37:08

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

Sinon jolie source, et surtout le code est propre à souhait :)
Commentaire de la_pin le 12/01/2005 12:38:09

Merci a tous ! et sinon, toujours pas de solution pour mozilla ???
Commentaire de shisun le 02/03/2005 19:11:51

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
Commentaire de la_pin le 08/03/2005 18:23:17

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 !
Commentaire de homelaet le 30/09/2005 12:44:58

moi je dis bravo je n'y aurai jamais pensé