Ir para conteúdo
Fórum Script Brasil
  • 0

Texto em cma da imagem


By Avril Lavigne

Pergunta

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 ;)
Link para o comentário
Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

  • 0
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!
Link para o comentário
Compartilhar em outros sites

  • 0

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>

Link para o comentário
Compartilhar em outros sites

  • 0

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>

Link para o comentário
Compartilhar em outros sites

  • 0

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>

Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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?

Link para o comentário
Compartilhar em outros sites

  • 0
É, 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! ^^
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...