[PHPBB3] Variables dans html

Bonjour à tous les milouziens,

J'ai besoin d'un cours de programmation, mais je ne sais pas si cela est réalisable.

Dans une page html que m'avait faite Philippe qui ressemble à ça et qui permet de faire défiler des images (3 dans cet exemple):

Code:


<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
* {box-sizing:border-box;}
  
body {
font-family: Verdana,sans-serif;
max-width: 350px;
max-height: 350px;
overflow:hidden !important;
    }
  
.mySlides {display:none}

/*auteur*/  
div.slideshow-container div.mySlides.fade span em {
color: #27AAB8;
display: block;text-align:center;
font-size: 16px;
font-family: Comic Sans MS;
}

div.mySlides.fade a img {
border: 4px white;
border-style: ridge;
display: block;
margin-left: auto;
margin-right: auto;
max-height:210px;
max-width:320px;
}
</style>

<div class="slideshow-container">
 
 <div class="mySlides fade">
        <a target="_blank" href="https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456"><img src="https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg" /> </a><span><em>Lulu</em></span>                                                                                                                                                                                                                                                                                                                         
        </div>
  
 <div class="mySlides fade">
        <a target="_blank" href="https://photoclic.forum-pro.fr/t23558-animaux-vert-le-petit-petite-famille-d-oies#295821"><img src="https://i.servimg.com/u/f82/16/32/20/49/p1110823.jpg" /> </a><span><em>Bertidom</em></span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
 </div>
        
 <div class="mySlides fade">
 <a target="_blank" href="https://photoclic.forum-pro.fr/t23459-architecture_et_graphisme-reverie-au-bureau#294870" target="_blank"><img src="https://i.servimg.com/u/f30/12/83/63/12/20130514.jpg" /> </a><span><em>Patlaine</em></span>                                                                                                                                                                                                                                                                                                                   
        </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
        
        <span class="dot"></span>      <span class="dot"></span>      <span class="dot"></span>    
        
</div>

 <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 3000); // Change image every 3 seconds
    }
    </script>


Serait-il possible d'avoir dans le div de la 1ière image par exemple à cette ligne :

Code:


<a target="_blank" href="https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456"><img src="https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg" /> </a><span><em>Lulu</em></span>

A la place de :

Code:

href="https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456"

et:

Code:

img src="https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg"

les variables:

Code:


var vlien1= "https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456";
Var vimage1= "https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg";


ce qui donnerait un truc dans le genre:

Code:


<a target="_blank" href="vlien1"><img src="vimg1" /> </a><span><em>Lulu</em></span>

De même pour les 2 autres div.

Merci pour votre aide.