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