Un texte avec un arriere plan defilant !
4/5 (10 avis)
Vue 15 642 fois - Téléchargée 1 266 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).
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
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> </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>
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
- Plan de texte
- Le plan du texte - Meilleures réponses
- Plan du texte - Meilleures réponses
- Remplir l'arrière plan d'un texte de saisie ✓ - Forum - Flash
- Visual Basic / VB.NET : Charger et sauvegarder une image (picturebox, image, arrière plan de - Guide
- Fermer des app d'arrière plan - Codes sources - Visual Basic / VB.NET (API)
- [ scrolling d'arriere plan avec vaisseau ] - Codes sources - C / C++ / C++.NET (Tutoriaux)
- Delphi / Pascal : Changement automatique de l'image de l'arrière plan lors du démarage - Guide
30 sept. 2005 à 12:44
8 mars 2005 à 18:23
Voila tout mais la source est bien de moi !
2 mars 2005 à 19:11
Donc ça pue la récup
12 janv. 2005 à 12:38
12 janv. 2005 à 00:37
Sinon jolie source, et surtout le code est propre à souhait :)
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.