0

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.

4

3 回答 3

1

做这样的事情：

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 + '">');
}
于 2012-05-13T16:38:40.913 回答
0

首先将您的javascript代码移动到函数中，例如：

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

然后您可以像这样在页面加载时启动该功能：

<body onload="showImage()">
于 2012-05-13T16:01:02.180 回答
0

您可以将图像动态设置为背景图像并放置类似这样的内容

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

在您页面的顶部。使用此解决方案，您必须为 div 标签 (870x374) 设置固定尺寸

于 2012-05-13T16:15:56.017 回答