how to download text in div

1

Please remove the site address ...

Two questions:

  • How to position div aId2 under div aId1;
  • How to download text in div depending on image change;
  • 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>
    
        
    asked by anonymous 22.05.2018 / 00:40

    1 answer

    1

    Inserting div into first and changing styles, such as position to absolute .

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

    See:

    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 styles and position div wherever you like.

        
    22.05.2018 / 02:57