Javascript random image generator in css-based page

Question

as the title says I'm trying to figure out how to call this javascript function in my webpage. It's for my business, and the template is just a basic, free one. I'm sure for someone more experienced than me it's probably just a simple matter of formatting it correctly. Here's what I'm working with.

Code that goes in the HEAD portion of the webpage:

var theImages = new Array() 
theImages[0] = 'splash1.jpg'
theImages[1] = 'splash2.jpg'
theImages[2] = 'splash3.jpg'
theImages[3] = 'splash4.jpg'
theImages[4] = 'splash5.jpg'
theImages[5] = 'splash6.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
  preBuffer[i] = new Image()
  preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

</script>

Now to call the function I use:

<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>

Here's the page in which I'm trying to implement it: http://coloradopp.com/index4.html

Instead of just displaying an image, I would like to call that function. Splash 1-6 are all the same size as the original image.

Here's the code snippet:

<div id="splash">
<img class="pic" src="images/splash1.jpg" width="870" height="374" alt="" />
</div>

As you can tell the page calls on a style sheet (style.css) for all the formatting.

Can anyone offer any tips on how to make this work? From what I've gathered, one cannot implement javascript into css sheets. Thanks in advance.

Kvam · Accepted Answer · 2012-05-13 16:38:40Z

1

Do something like this:

showImage() {
  var theImages = [ 'splash1.jpg', 'splash2.jpg', 'splash3.jpg', 'splash4.jpg', 'splash4.jpg' ];
  var img = theImages[Math.round(Math.random() * (theImages.length - 1))];
  document.getElementById('splash').innerHTML = '<img src="' + img + '">');
}

answered May 13, 2012 at 16:38

Kvam

2,2282 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriel · Accepted Answer · 2012-05-13 16:01:02Z

0

First move your javascript code inside the function something like:

function showImage(){ ...your code goes here...}

And then you can initiate the function on page load like this:

<body onload="showImage()">

answered May 13, 2012 at 16:01

Gabriel

651 gold badge1 silver badge5 bronze badges

Comments

sofl · Accepted Answer · 2012-05-13 16:15:56Z

0

You can set the images dynamically as background-image and place something like this

<script>
document.write('<style>#splash{ background-image:url(\'images/splash'+Math.round(Math.random()*5+1)+'.jpg\');}</style>');
</script>

at the head of your page. With this solution you have to set fix dimensions for your div tag (870x374)

answered May 13, 2012 at 16:15

sofl

1,0148 silver badges15 bronze badges

1 Comment

user1246457 Over a year ago

Thanks, this is actually quite helpful. The only thing is, since it places the image as the background, they space they end up occupying is larger than the pictures. Is there any way round this? Can't I just call a function as an image source?

Collectives™ on Stack Overflow

Javascript random image generator in css-based page

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related