Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lgba

Imagem no background com texto em cima

Por , em Desenvolvimento frontend

Recommended Posts

lgba    0

lgba
Postado

Meus amigos, estou precisando de uma ajuda deste VALOROSO grupo.

É o seguinte, preciso colocar umas imagens trocando no BG, e com texto em cima dessas imagens.

Já tentei com DIV dentro de DIV, DIV dentro de tabela, javascript, mas não consigo resolver.....

 

Este é o link que estou usando, note que a palavra "testando4", aparece ABAIXO da imagem, e não em cima dela como preciso.

www.siteecia.com/mudaBG/teste.html

 

Segue abaixo o código que estou usando.

 

O que eu preciso fazer para que o texto apareça em cima das imagens, que estão trocando sozinhas?

 

Qualquer ajuda é bem-vinda.

Obrigada, Simone.

 

<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
document.getElementById("myimage").src="01.jpg";
imageID++;
}
else{if(imageID==1){
document.getElementById("myimage").src="02.jpg";
imageID++;
}else{if(imageID==2){
document.getElementById("myimage").src="03.jpg";
imageID=0;
}}}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='950px' height='1000px' id='myimage' />
<div id='div1' class="style1">
testando4</div>
</div>
</body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Jourdan    3

Thiago Jourdan
Postado

Olá.

 

Resolvi parte do seu problema: só consegui aplicar "align", mas não "valign", ou seja, o texto está no meio do topo.

 

Eu otimizei o seu JavaScript pra uma aplicação menor que eu estudei uns dias atrás (menos linhas, menos if's, menos processamento, mais legível), e vou explicando ao longo do código através dos comentários. ^^

 

Código JavaScript:

var imagens=new Array("url('01.jpg')","url('02.jpg')","url('03.jpg')");
// Declara o valor das url's das imagens em um array qualquer
var num_imgs=2; // Número de imagens (iniciando em "0")
var img_atual=-1; // Se iniciar em 0, o browser faz a primeira leitura e incrementa
                      // No fim das contas inicia em 1 se colocar 0, então fica -1
function changeimage(){
    if(img_atual<num_imgs){
         img_atual++; // se a imagem atual não atingiu o número de imagens, incrementa
    }else{
         img_atual=0; // se a imagem atual atingiu o número de imagens, zera
    }
    document.getElementById("div1").style.background=imagens[img_atual];
    // imprime a imagem
    setTimeout("changeimage()",8000); // delay
}

 

Código CSS:

 

body{
background:black;
width:100%; /* Valores fazem com que o body */
height:100%;                     /* ocupe toda a página (questão de layout) */
}
#div1{
color:#F00; /* Cor vermelha pra questão de visualização */
width:80%; /* Aqui eu defini esses valores de width e height*/
height:100%;                         /* porque os que você tinha definido ficaram */
position:relative;                                 /* horríveis no meu pc */
}

 

Código HTML:

 

<html>
    <head>
        <!-- Aqui, considere as tags JavaScript e CSS -->
    </head>
    <body onload='changeimage()' align="center">
        <div id='div1'>
            <span>testando4</span> <!-- Inclui span para editar, mas não deu em nada -->
        </div>
    </body>
</html>

 

Então, se não entender qualquer coisa, pode voltar que terei prazer em responder. :)

 

No mais, se não houver dúvidas, peço que dê um ponto positivo (se achar por bem) e que encerre o tópico. ^^

 

Abraços,

 

Thiago Jourdan.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito