Texto em cma da imagem

[By Avril Lavigne]

Olá pessoal! Somos novo no fórum, este é nosso primeiro post, Estou com uma dúvida, para vocês deve ser muito simples, o que eu quero é o seguinte, Queria pegar uma imagem que já tenho feita, e por cima dela colocar um texto pra ficar se mexendo da esquerda pra direita ou vice versa, tipo, quero que a imagem fique no plano de fundo e o texto por cima rolando de um lado para o outro, preciso deste código para fazer um destaque de notícias em um fã site que tenho, eu agradeço desde já a ajuda, volto em breve para ler ;)

[_Vinny_]

A imagem você usa o background para colocar como fundo.

Se usa tabelas, na linha do conteudo faça assim:

<td height="100" background="background.gif">

Para colocar o texto em movimento.

<marquee>TEXTO</marquee>

Compreendeu?

[By Avril Lavigne]

Bom.. entender não, me da um exemplo, olha o link da imagem que vou usar tipo no layout vai ser essa http://i27.tinypic.com/35chrie.jpg dai tipo quero digitar um texto pra que fique por cima dela e fique passando da esquerda pra direita até o desenho do coração tipo uma notícia: Exclusivo: Sairá o quarto álbum da cantora etc.... dai ela vai passsando e quando chegar antes da caveira ela va sumindo e recomeçe a passar de novo sakas? Se possível me passa já o código num exemplo pra eu entender, vlw!

[By Avril Lavigne]

Então, olha só, eu consegui fazer, porém so preciso de uma coisinha, como faço para que a mensagem desapareça antes do coração da imagem e não passe por cima dela?

abaixo o código que eu fiz:

<table>
<td height="30" WIDTH="375" background="http://i27.tinypic.com/35chrie.jpg"</table>
<marquee heigth="480" widht="480" direction="left" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="5">
<center>
<span style="font-size:85%;"><span style="color: rgb(255, 255, 255);font-family:arial;" ><span style="color: rgb(255, 0, 0); font-weight: bold;"><span style="color: rgb(255, 153, 255);">Exclusivo</span>:</span> <span style="color: rgb(204, 204, 204);">Vazou na internet um preview da faixa Darlin que terá no 4º Álbum, <span style="color: rgb(255, 153, 255);font-size:100%;" >Faça o Download: <span style="font-size:85%;"><a style="color: rgb(255, 153, 255); font-weight: bold;" href="http://www.4shared.com/file/124280773/db4bac0f/Avril_Lavigne_-_Darlin_Preview.html" target="_blank">CLICK AQUI!</a></span></span>
</span></span></span>
</center></marquee>

[_Vinny_]

No seu site, você usa tabelas ou div?

Vamos fazer o seguinte, crie uma div:

<div></div>

Agora vamos meter a imagem no fundo dessa div:

<div style="background-image:url(AQUI_FICA O LINK DA IMAGEM)"></div>

Ok, imagem adiciona, agora vamos colocar para que a imagem não repita no fundo, a largura e a altura da imagem:

<div style="background-image:url(AQUI_FICA O LINK DA IMAGEM)"; background-repeat: no-repeat; min-height:92px; width: 375px"></div>

background-repeat: comando para fazer ou não a imagem do fundo repetir dentro da div. Você repetir na horizontal(repeat-x), na vertical(repeat-y) ou simplesmente repetir(no-repeat). min-height: define o tamanho da altura da imagem para fica visível dentro da div, que é 32 pixels. width: e a largura da imagem, que no caso é 375 pixels Para fazer o texo movimentar dentro da div, use o comando marquee:

<marquee>Este texto esta em movimento</marquee>

Finalizando, o comando completo ficaria assim:

<div style="background-image: url(http://i27.tinypic.com/35chrie.jpg); background-repeat:no-repeat; min-height: 32px; width: 375px"><marquee>Exclusivo: Sairá o quarto álbum da cantora etc</marquee></div>

[_Vinny_]

Seu codigo tá muito bagunçado e errado, seria assim:

<table>
<td height="32" WIDTH="375" background="http://i27.tinypic.com/35chrie.jpg" valign="baseline">
<marquee heigth="480" widht="480" direction="left" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="5">
<span style="font-size:85%;"><span style="color: rgb(255, 255, 255);font-family:arial;" ><span style="color: rgb(255, 0, 0); font-weight: bold;"><span style="color: rgb(255, 153, 255);">Exclusivo</span>:</span> <span style="color: rgb(204, 204, 204);">Vazou na internet um preview da faixa Darlin que terá no 4º Álbum, <span style="color: rgb(255, 153, 255);font-size:100%;" >Faça o Download: <span style="font-size:85%;"><a style="color: rgb(255, 153, 255); font-weight: bold;" href="http://www.4shared.com/file/124280773/db4bac0f/Avril_Lavigne_-_Darlin_Preview.html" target="_blank">CLICK AQUI!</a></span></span>
</span></span></span>
</marquee>
</td></table>

[By Avril Lavigne]

Bom.. esse resultado ai deu no mesmo que eu já tinha postado, o que quero saber é so como alinhar esse texto pra sumir antes do coração da imagem, e não ficar indo de ponta a ponta, já tentei alinhar mais não consigo :P

[_Vinny_]

você pode corta esta imagem em duas partes, uma será a parte que contem a caveira e a outra o resto da imagem.

Dai, fazer uma tabela com duas colunas, na primeira, coloca a caveira como fundo e na segunda o resto da imagem e o texto em movimento, assim o texto ficará somente na segunda coluna sem passar pela caveira.

Entendeu?

[By Avril Lavigne]

Sim, mais tipo, se por as duas a imagem num vai ficar feia toda recortada? ou ficará junta?

Me passa ai o código como seria ela recortada pra eu ter uma noção, dai eu me viro! :)

vlw!

[_Vinny_]

Veja o exemplo:

http://vinny.6te.net/teste.htm

[By Avril Lavigne]

É, eu vi lá, mais tipo, como eu imaginava, iria ficar cortado a imagem ;S mais beleza, se esse é o unico jeito de fazer eu tive outra ideia como fazer aqui, obrigado pela ajuda e desculpa o incômodo! ^^

[_Vinny_]

Incomodo nenhum, sempre que precisa, basta postar.

Editado Agosto 13, 2009 por _Vinny_

[Teko]

Tu pode fazer direto em um gif animado também.

Pra fazer gifs eu gosto do Beneton Movie GIF. É gratuito e bem fácil de usar.