how to download text in div

Asked

Viewed 72 times

1

Please remove the address from the site...

Two questions:

  1. How to position the div aId2 under the div aId1;
  2. How to download text in div according to changing image;

Example:

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

Code:

<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>
javascript

1 answer

1

Inserting the div in the first and changing styles, such as the position for absolute.

To change the text use: document.querySelector('#aId2 h1').textContent

Behold:

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>

You can change the styles and position the div wherever you want.

  • vlw professor!! thanks. I am happy for your brilliant knowledge in Portuguese and have understood what you would like to do.

  • rs.. obg, but would not say "brilliant", would say "basic":D

  • No no. It was brilliant, yes. And believe me, there’s a lot of basics for you to learn yet. to our luck, everyone we post, you are a very smart guy. should teach...;) success!

  • Evandro, don’t leave questions open. Check an answer that solved your problem. If the answers haven’t solved, ask, but it’s important to finalize the questions, that’s the focus of the community. Abs!

  • did not locate the option to perform this operation.

  • On the left side of the answer, below the voting arrows has an icon

Show 1 more comment

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.