User not logged in - login - register
Home Calendar Books School Tool Photo Gallery Message Boards Users Statistics Advertise Site Info
go to bottom | |
 Message Boards » » Gah I suck at Javascript Page [1]  
Raige
All American
4386 Posts
user info
edit post

Here's the deal. I know how to make a random image appear from a random number generator when using <img>.

However I need to change the image set as a background in a style on reload of a page. I'd love it to be in the form of a div but I don't know how to do that with CSS and Javascript. (NOTE: this is not a BODY background image but a td cell background image or I'd just use the onload function)

The item that needs to change is currently in a <td> tag. Currently it's <td style="background-image:url(image.jpg)" height="XXX" width="XXX"></td> Eventually the table will go away completely but this is part of a massive page generated a while ago.

I'd like to remove the style from the td tag and put a <div> inside the td that would have the background of said image. However since this image needs to be random I have no clue how to get this to work.

I just need this to work until I have a chance to go back and change this page to div's. Here's my current Javascript I stole from the web

<script language="javascript">
var currentdate = 0
var core = 0

function StringArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '

}
}

image = new StringArray(9)
image[0] = 'image-1.jpg'
image[1] = 'image-2.jpg'
image[2] = 'image-3.jpg'
image[3] = 'image-4.jpg'
image[4] = 'image-5.jpg'
image[5] = 'image-6.jpg'
image[6] = 'image-7.jpg'
image[7] = 'image-8.jpg'
image[8] = 'image-9.jpg'

var ran = 60/image.length

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}
</script>

Help is appreciated.

[Edited on January 29, 2007 at 9:51 AM. Reason : !]

1/29/2007 9:50:40 AM
Raige
All American
4386 Posts
user info
edit post

Nevermind figured it out

<script language="javascript">
document.write('<td background="img/'+ranimage()+'"></td>')
</script>

However, I would like to do this with CSS at some point and any pointers on doing that is greately appreciated.

1/29/2007 9:55:07 AM
breaker05
Veteran
367 Posts
user info
edit post

what kind of page is it? .html, .aspx, .php?

to my knowledge, you won't be able to pull this off within a css class. you could have multiple css styles specified in the css file, but you would have to change the class or id the div references in the css.

ex.) <div id="style1">, <div id="style2">, etc... and change the id on page load.

1/29/2007 4:37:19 PM
Raige
All American
4386 Posts
user info
edit post

Basically this is on a page where php CAN run but it's moving to a cold fusion server. Once there I'll be able to do this on my own without worry about javascript. But in the meantime I needed this fix.

I've found a few good things online about doing this but they all agree it can't be done on a .css page so doing it in div's is gonna be tough. I'm not too worried. it works now in it's current form but if you use dreamweaver design view you're screwed.

1/29/2007 5:33:17 PM
mienutzich
All American
4300 Posts
user info
edit post		 



function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
document.getElementById("divwithbackground").style.background = "url(image[core])";
}


<html>
<body onload="ranimage();">
<div id="divwithbackground"></div>
</body>
</html>


unless im missing something that seems pretty easy

1/30/2007 7:21:13 PM
Raige
All American
4386 Posts
user info
edit post

Yup, but I was referring to it being on the .css file, which you can't do! ^ that however is nice to see in use.

The problem was that not only did this number set the background but also the flash banner add that floats on top of it. In addition it turns out that the div that would set the background when used around the div that sets the location of the banner BREAKS the banner display script. Why I don't know. No error is given... it just ceases working.

So, while I'm sure there is a reasonable explanation I have it working at the moment and I'm just going to wait until a scripting language I'm more familiar with is available. I appreciate the help a lot though.

-div noob

[Edited on January 31, 2007 at 8:10 AM. Reason : !]

1/31/2007 8:07:22 AM
Arab13
Art Vandelay
45180 Posts
user info
edit post

join the club

1/31/2007 11:46:38 AM
 Message Boards » Tech Talk » Gah I suck at Javascript Page [1]  
go to top | |
Admin Options : move topic | lock topic

© 2024 by The Wolf Web - All Rights Reserved.
The material located at this site is not endorsed, sponsored or provided by or on behalf of North Carolina State University.
Powered by CrazyWeb v2.39 - our disclaimer.