CODEWITHSUNDEEP
javascripthtmlcssimagerandom
user1246457
user1246457

Reputation: 89

Javascript random image generator in css-based page

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.

Upvotes: 0

Views: 5252

Answers (3)

Kvam
Kvam

Reputation: 2218

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 + '">');
}

Upvotes: 1

sofl
sofl

Reputation: 1024

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)

Upvotes: 0

Gabriel
Gabriel

Reputation: 65

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()">

Upvotes: 0

Related Questions