html - image randomizer in javascript -
i making html page image randomizer using code found somewhere. code, however, compels me set width , height in pixels. when use code on div image not scale bad fluid layout use. (when set width auto or 100% in css image doesn't show) how alter code works in fluid layout? here's css:
.stretcher { /*#bg {*/ position: absolute; left: 0px; top: 0px; z-index: -69; width:1366px; height:768px; }
the head part of html:
<script type="text/javascript"> window.onload = function () { var header = document.getelementbyid('bg'); var pictures = new array('bgs/1.jpg','bgs/2.jpg','bgs/3.jpg','bgs/4.jpg','bgs/5.jpg'); var numpics = pictures.length; if (document.images) { var chosenpic = math.floor((math.random() * numpics)); header.style.background = 'url(' + pictures[chosenpic] + ')'; } }
and div in body:
<div class="stretcher" id="bg"></div>
probably can set width
, heigth
100% , image background cover
:
css:
.stretcher { position: absolute; left: 0px; top: 0px; z-index: -69; width:100%; height:100%; }
js:
function cycle() { var header = document.getelementbyid('bg'); var pictures = new array('http://advancement.georgetown.edu/advent/wallpapers/ui/img/1366x768/sealwp_1366x768.jpg', 'http://www.sonymobile.co.jp/xperia/docomo/so-01d/common/download/wallpaper/1366-768/xperiaplaywp_1366-768_bk02.jpg'); var numpics = pictures.length; if (document.images) { var chosenpic = math.floor((math.random() * numpics)); header.style.background = 'url(' + pictures[chosenpic] + ')'; header.style.backgroundsize = 'cover'; } } cycle();
Comments
Post a Comment