1

por favor, retirem o endereco do site...

Duas perguntas:

  1. Como posicionar a div aId2 sob a div aId1;
  2. Como descarrar texto na div de acordo com a mudança da imagem;

Exemplo:

texto1 aparecer com imagem1
texto2 aparecer com imagem2
texto3 aparecer com imagem3

Código:

<html>
<head>
<style>
body {font-size: 98%;}
</style>

<script type="text/javascript">
function slide1(){
document.getElementById('id').src="http://site/imagem/foto-0.jpg";
setTimeout("slide2()", 3000);
document.getElementById('aId').href="link1.html";
document.getElementById('aId').alt="slid1";
}

function slide2(){
document.getElementById('id').src="http://site/imagem/foto-1.jpg";
setTimeout("slide3()", 3000);
document.getElementById('aId').href="link2.html";
document.getElementById('aId').alt="slid2";
}

function slide3(){
document.getElementById('id').src="http://site/imagem/foto-2.jpg";
setTimeout("slide1()", 3000);
document.getElementById('aId').href="link3.html";
document.getElementById('aId').alt="slid3";
}
</script>
<body onLoad="slide1()">
<div id="aId1" style="position: relative;">
<a id="aId"><img id="id" width="100%"></a>
</div>
<div id="aId2" style="position: relative; transparent; width:80%;height:50%;margin-top:0;margin-left: 10%; margin-right: 10%; text-align: center">
<h1>texto slid 1</h1>
</div>
</body>
</html>
0

1 Resposta 1

1

Inserindo a div na primeira e alterando os estilos, como o position para absolute.

Para alterar o texto use: document.querySelector('#aId2 h1').textContent

Veja:

function slide1(){
document.getElementById('id').src="http://site/imagem/foto-0.jpg";
setTimeout("slide2()", 3000);
document.getElementById('aId').href="link1.html";
document.querySelector('#aId2 h1').textContent="slid1";
}

function slide2(){
document.getElementById('id').src="http://site/imagem/foto-1.jpg";
setTimeout("slide3()", 3000);
document.getElementById('aId').href="link2.html";
document.querySelector('#aId2 h1').textContent="slid2";
}

function slide3(){
document.getElementById('id').src="http://site/imagem/foto-2.jpg";
setTimeout("slide1()", 3000);
document.getElementById('aId').href="link3.html";
document.querySelector('#aId2 h1').textContent="slid3";
}
<body onLoad="slide1()">
<div id="aId1" style="position: relative;">
   <a id="aId"><img id="id" width="100%"></a>
   <div id="aId2" style="position: absolute; left: 0; bottom: 0; text-align: center; width: 100%;">
      <h1>texto slid 1</h1>
   </div>
</div>

Você pode alterar os estilos e posicionar a div onde quiser.

6
  • vlw professor!! obrigado. fico feliz pelo seu conhecimento brilhante em português e ter entendido o que gostaria de fazer.
    – evandro
    22/05/2018 às 9:46
  • rs.. obg, mas não diria "brilhante", diria "básico" :D
    – Sam
    22/05/2018 às 16:04
  • não não. foi brilhante sim. e acredite, tem muito básico para tu aprender ainda. para nossa sorte, todos que postamos, você é um cara muito inteligente. deveria lecionar...;) sucesso!
    – evandro
    23/05/2018 às 12:21
  • Evandro, não deixe perguntas em aberto. Marque ✓ em uma resposta que resolveu seu problema. Caso as respostas não resolveram, questione, mas é importante finalizar as perguntas, esse é o foco da comunidade. Abs!
    – Sam
    30/05/2018 às 4:46
  • não localizei a opção para realizar esta operação.
    – evandro
    30/05/2018 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .