vendredi 30 décembre 2016

Random image everytime the page refreshes

I've been trying to connect this random image javascript to the code but I don't understand javascript at all so I was struggling for a long time.. I don't even know if javascript is the best approach, some were saying to use jQuery or php.

I just need the images to appear where #banner image should be. (change the <img> to <div> in html to see the normal, version of how it is meant to be).

<script type="text/javascript">
  var images = new Array('http://ift.tt/2ixPwpZ', 'http://ift.tt/2hzWvAl', 'http://ift.tt/2ixPxKz', 'http://ift.tt/2hzQkfy', 'http://ift.tt/2ixCt84');
  var l = images.length;
  var random_no = Math.floor(l*Math.random());
  document.getElementById("banner").src = images[random_no];
</script>
    html {
        height:100%;
}
    body {
        height:100%;
        background:url(http://ift.tt/2hzZ05I) center #111111;
        margin:0px;
        padding:0px;
        
}
    section {
        min-height:100%;
        height:100%;
        display: table;
        width: 100%;
        background-position:center;
        
}
    .center {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
}
    #banner {   
        margin:auto;
        text-align: center;
        background: #222222 url(http://ift.tt/2ixPwpZ);
        padding: 0px;
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333; 
}
     
    .back {
        margin: auto;
        width: 850px;
        height: 500px;
        background: url(http://playerio-
                        http://ift.tt/2ixBXH8) no-repeat center center #000000;
        border-right: 1px solid #333333;
        border-left: 1px solid #333333;
}
<section>  
    <div class="center" >
        <img src="http://ift.tt/2ixPwpZ" id="banner"/>
                        <div class="back">
            <embed src="gamelinkhere" width="850px" height="500px" 
quality="high" bgcolor="#000000" allowfullscreen="true" allowfullscreeninteractive="true" allowscriptaccess="always" 
type="application/x-shockwave-flash" pluginspage="http://ift.tt/iA2Zkd" wmode="direct"></embed>
                        </div>   
                </img>
    </div>
</section>
     



Aucun commentaire:

Enregistrer un commentaire