Texte qui défile avec marquee sur une zone précise d'une image

[Alban 56]

Bonjour à toutes et à tous et plus particulièrement à Final Blond,

Ce script m'intéresse beaucoup:

Code:

<table align="center" width="XXX"PIXELS_LARGEUR_IMAGE height="YYY"PIXELS_HAUTEUR_IMAGE style="background: url('url_image');" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><marquee direction="right" scrolldelay="170" onmouseover="this.stop();" onmouseout="this.start();">BLA BLA BLA</marquee></td></tr></table>

Est-il possible de faire défiler le texte à un endroit précis de l'image, et si possible dans un cadre dont on définira les dimensions ?

D'avance merci,

Cordialement,

Alban

[Alban 56]

Personne n'a une idée ?

[Alban 56]

Toujours rien ?

[Sirius]

J'ai rencontré ce problème dernièrement, j'ai du couper mon image en trois partie.
la première fixe ne laissant rien apparaître, la troisième tout en bas qui est également fixe et décorative. C'est sur la deuxième image où s'effectue le défilement que j'ai inséré ce code laissant défiler les titres des albums :

<tr><td valign="middle" width="180" align="center" background="https://i.servimg.com/u/f61/12/31/18/37/chaine10.gif" height="85"><marquee onmouseover="this.STOP()" style="width: 180px; height: 95px;" onmouseout="this.start()" scrollamount="1" scrolldelay="5" direction="up"><center><font color="#cccccc" size="2"></font><div style="text-align: center;"><font color="#cccccc" size="2"><a onclick="window.open(this.href,'','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=220,height=320,status'); return false" href="https://sd-1.archive-host.com/membres/up/48256327561982834/player-page-htm/Player-David-Schombert.htm">David Schombert<br>Quiet Life Vol. 1</a><br></font></div><font color="#cccccc" size="2"><br></font><div style="text-align: center; color: Blue;"><font color="#cccccc" size="2"><br>*****<br>

Si c'est autorisé (dans le cas contraire ce sera à supprimer par le staff !), tu peux voir le rendu à cette adresse (mini-chaine dans la colonne de gauche) : http://spapoitiers.positifforum.com/

[Alban 56]

Merci Sirius
Le problème c'est que je souhaite intégrer mon texte dans UNE SEULE image, avec un texte qui défile dans un cadre que je pourrais positionner là où je veux, et pour l'instant je n'arrive qu'à ça :

Code:

<table align="center" width="800"PIXELS_LARGEUR_IMAGE height="436"PIXELS_HAUTEUR_IMAGE style="background: url('http://i46.tinypic.com/312aff5.jpg');" border="10" cellspacing="0" cellpadding="0"><tr><td align="center"><marquee direction="left" "scrollamount="2" scrolldelay="5" onmouseover="this.stop();" onmouseout="this.start();">[table style="background: white; border: 3px solid black;"][tr][td]Mon texte affiché ici[/td][/tr][/table]</marquee></td></tr></table>

Mon texte est bien dans un cadre, mais c'est le cadre qui défile, au lieu d'être fixe, et je ne sais pas comment le positionner là où je veux.

[Alban 56]

Un petit effort SVP

[Invité]

Hello Alban,

Aïe, du BBcode mélangé à du HTML, beurk, rédhibitoire !
En plus, il y a du texte descriptif dans le HTML (ce que l'on peut faire, mais comme pour le CSS, il y a des balises pour ça, par exemple : <!-- PIXELS_HAUTEUR_IMAGE -->).

Alors essayons ainsi :

<table align="center" width="800" height="436" style="background: url('https://2img.net/h/oi46.tinypic.com/312aff5.jpg');" border="10" cellspacing="0" cellpadding="0"><tr><td valign="top" style="padding: 10px;"><marquee direction="left" scrolldelay="170" onmouseover="this.stop();" onmouseout="this.start();"><div style="text-align: center; padding: 4px; background: white; border: 3px solid black;">Mon texte affiché ici</div></marquee></td></tr></table>

Pas besoin de mettre une autre table car c'est plus difficile à gérer et une "div" est un bloc.
La propriété valign est pour l'alignement vertical et ne fonctionne que dans un "td" =
top (haut) middle (milieu) bottom (bas).
Le padding est l'espace du cadre dans les 4 sens (bon le bas ne joue pas de grand rôle puisqu'il est aligné en haut). Si tu veux moduler l'espace à droite et à gauche par exemple, la syntaxe est celle-ci :
padding: 10px 5px 10px 5px; =
dans le sens des aiguilles d'une montre >> top - right - bottom - left

Le "scrolldelay" est la vitesse de défilement : plus sa valeur est haute, plus le défilement sera lent.

[Alban 56]

Aïe, du BBcode mélangé à du HTML, beurk, rédhibitoire !

Ben oui mais quand on ne connait pas les règles on essaye un peu n'importe quoi

Bonjour Final-Blond et merci pour ton aide,

J'ai mis mon texte là où je voulais en bas, ça c'est OK

Je trouve que quand on associe "scrollamount="2" et scrolldelay="5" on obtient un défilement moins saccadé qu'avec uniquement la commande scolldelay, mais est ce que la commande est correcte ?

Pour le reste j'en suis là:

Code:

<table align="center" width="800" height="436" style="background: url('http://i46.tinypic.com/312aff5.jpg');" border="10" cellspacing="0" cellpadding="0"><tr><td valign="bottom" style="padding: 12px;"><marquee direction="left" "scrollamount="2" scrolldelay="5" onmouseover="this.stop();" onmouseout="this.start();"><div style="text-align: center; padding: 4px; background: white; border: 3px solid black;">Mon texte affiché ici</div></marquee></td></tr></table>

Mais ce que je souhaiterais obtenir c'est un cadre blanc bordé de noir FIXE dans lequel défilerait mon texte; et non pas un cadre blanc bordé de noir qui défile avec mon texte; cela est-il possible ?
D'avance merci,

[Invité]

Je trouve que quand on associe "scrollamount="2" et scrolldelay="5" on obtient un défilement moins saccadé

Absolument et c'était un oubli de ma part.
Par contre, le scrolldelay (delay=retard) est beaucoup trop rapide.
Voilà une petite explication piquée au hasard sur GMA (Google Mon Ami) :
"Quand le texte défile, il est en fait décalé dans le temps d'un certain nombre de pixels. C'est ce que détermine scrollamount. (plus il est faible et plus on aura l'impression qu'il défile. par contre, vous ne pourrez pas aller vite)."
Donc, le bon rendu est un défilement beaucoup plus (+++) lent avec un scrollamount bas.

ce que je souhaiterais obtenir c'est un cadre blanc bordé de noir FIXE dans lequel défilerait mon texte; et non pas un cadre blanc bordé de noir qui défile avec mon texte

Ah ok.
Alors il faut juste inverser la donne du "marquee", qui en lieu et place de contenir le cadre ("div") sera contenu dans celui-ci :

<table align="center" width="800" height="436" style="background: url('https://2img.net/h/oi46.tinypic.com/312aff5.jpg');" border="10" cellspacing="0" cellpadding="0"><tr><td valign="bottom" style="padding: 10px;"><div style="text-align: center; padding: 4px; background: white; border: 3px solid black;"><marquee direction="left" scrolldelay="40" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">Mon texte affiché ici</marquee></div></td></tr></table>

[Alban 56]

IMPECCABLE ! c'est tout à fait ce que je voulais obtenir. Merci beaucoup Final-Blond pour ta sollicitude.
Très cordialement,
Alban