CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 07:16:22

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Graphique

> UN TEXTE AVEC UN ARRIERE PLAN DEFILANT !

UN TEXTE AVEC UN ARRIERE PLAN DEFILANT !

Information sur la source

Note :

7,80 / 10

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é :13 682 / 1 125

Auteur : la_pin

Ecrire un message privé

Site perso

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

Les Membres Club peuvent 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

1 2 3 4 5 6 7 8 9 = 100 !

CONTROLER LE FLASH PLAYER

MAGIFIQUE GENIE HYPER SYMPA !

RECOMMANDER UNE PAGE A UN AMI EN JAVASCRIPT !

Toutes les sources de la_pin

Sources de la même categorie

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

Toutes les sources de la catégorie Graphique

Commentaires et avis

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é

Ajouter un commentaire

Nos sponsors

Derniers Blogs

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System