frippel
asked on
random background javascript
Hi,
I'm trying to accomplish the following a random background in a div tag
here is my code so far but doesn't give me a background. When i put the code into a function it seems to work, but due to the multiplicity of the page i can't do that.
Do you see what i'm doing wrong?
I'm trying to accomplish the following a random background in a div tag
here is my code so far but doesn't give me a background. When i put the code into a function it seems to work, but due to the multiplicity of the page i can't do that.
Do you see what i'm doing wrong?
<SCRIPT LANGUAGE="JavaScript">
var bgs=new Array;
bgs[0]='../img/backgr1.jpg';
bgs[1]='../img/backgr2.jpg';
bgs[2]='../img/backgr3.jpg';
var num=Math.floor(Math.random()*bgs.length);
document.write("<DIV style='background-image:url('"+bgs[num]+"')>");
</script>
The issue is probably with document.write ... It's a naaaaaaaasty method.
Instead, create the <div> in the markup along with everything else, and give it an id... Maybe something like:
<div id="bgimage">
</div>
Then use the javascript to get the div and add an attribute:
document.getElementById( "bgimage" ).setattribute("style", "background-image:url('"+b gs[num]+"' )");
That hopefully take care of it. :)
Instead, create the <div> in the markup along with everything else, and give it an id... Maybe something like:
<div id="bgimage">
</div>
Then use the javascript to get the div and add an attribute:
document.getElementById( "bgimage" ).setattribute("style", "background-image:url('"+b
That hopefully take care of it. :)
correction, url on first image was missing the quotes.....
<script type="text/javascript">
var randombgs=["../img/backgr1.jpg", "../img/backgr2.jpg", "../img/backgr3.jpg"]
document.body.style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
</script>
If you want it in a DIV tag instead of body then add your div tag then do something like this:
<body>
<div id="backgrounddiv"></div>
<script type="text/javascript">
var randombgs=["../img/backgr1.jpg", "../img/backgr2.jpg", "../img/backgr3.jpg"]
document.getElementById('backgrounddiv').style.background='white url('+Math.floor(Math.random()*randombgs.length)]+')')
</script>
</body>
ASKER
yes i know about that method however i can't do that because of the following reason. It get's calle from another link to show.. (div id"inner") but also directly from the onload in the body tag...
if i do the methode you all suggest it only works from the link and not from the onload in the body tag...
bellow is a bit more code, i hope i makes it clear. It's part of the ibox script but it needs to show the inline popup when the page loads (the inner id tag) which it does, just no background...
if i do the methode you all suggest it only works from the link and not from the onload in the body tag...
bellow is a bit more code, i hope i makes it clear. It's part of the ibox script but it needs to show the inline popup when the page loads (the inner id tag) which it does, just no background...
<div id="inner" style="display:none;">
<SCRIPT LANGUAGE="JavaScript">
var bgs=new Array;
bgs[0]='../img/backgr1.jpg';
bgs[1]='../img/backgr2.jpg';
bgs[2]='../img/backgr3.jpg';
var num=Math.floor(Math.random()*bgs.length);
document.write("<DIV style='background-image:url('\"+bgs[num]+\"')>");
</script>
<div id="midtita">Next training:<br><span style="font-size:14px; font-weight:bold"><%=whenid%></span><br></div>
<div id="midtitb"><%=title%></div>
<p class="contactbodyb">
<%=description%><br /><br />
</p>
</div></div>
<body onLoad="iBox.show(document.getElementById('inner').innerHTML)">
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window