begin process at 2008 08 20 17:41:43
1 228 990 membres
350 nouveaux aujourd'hui
14 259 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

UN TEXTE AVEC UN ARRIERE PLAN DEFILANT !


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

Note :
7,8 / 10 - par 10 personnes
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

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>
  • <!--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>
<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
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

11 janvier 2005 12:35:12 :
Correction de quelques fotes dortografe et de quelques bugs dans le code.
  • signaler à un administrateur
    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

  • signaler à un administrateur
    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+

  • signaler à un administrateur
    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...

  • signaler à un administrateur
    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

  • signaler à un administrateur
    Commentaire de ThunderPsycho le 11/01/2005 13:21:41

    y a pas d'âge pour bien faire les choses ;o)

  • signaler à un administrateur
    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 :)

  • signaler à un administrateur
    Commentaire de la_pin le 12/01/2005 12:38:09

    Merci a tous ! et sinon, toujours pas de solution pour mozilla ???

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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 !

  • signaler à un administrateur
    Commentaire de homelaet le 30/09/2005 12:44:58

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

Ajouter un commentaire

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
campagne Adwords
Budget : 5 000€
Boite echanges securis...
Budget : 500€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

VS Express FR Gratuit !

VS Express en français et 100% gratuit !

Boutique

Boutique de goodies CodeS-SourceS