Hi all,

I want to know if it possible to load different images into page every time the website is viewed?
If so, please help.
Thanks in advance

8 Years
Discussion Span
Last Post by Takkies

load different images into page every time the website is viewed?

Write an onload= function to set the src= field of the IMG(s).

You can use Math.random() to compute filenames based on a pattern (cloud0.jpg, cloud22.jpg, cloud7.jpg, etc.) or choose arbitrary filenames from an array ["sky.jpg","cloud.gif","rain.bmp","snow.jpg"] .

To change the IMG(s) in a predictable (instead of random) way, you could use something like [a part of] the day or time.


Hi fxm, thank you, but i`m not quit sure as to how to impliment this. Ive got a table with 2 cell's, i want to load a different images into both of the cells every time the products tab is clicked.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type="text/javascript">

var aImgs = ["C.gif", "D.gif", "H.gif", "S.gif"]
var nImgA = -1
var nImgB = -1

function chgImgs() {

    nImgA += 1
    if (nImgA == aImgs.length) nImgA = 0;
    oImgA = document.getElementById('imgA')
    oImgA.setAttribute('src', aImgs[nImgA])

        var tmp = Math.floor(Math.random() * aImgs.length)
    while (tmp == nImgB)
    nImgB = tmp
    oImgB = document.getElementById('imgB')
    oImgB.setAttribute('src', aImgs[nImgB])

  <body onload="chgImgs()">
    <div onclick="chgImgs()">
    </div><img id='imgA' src='' name="imgA"> <img id='imgB' src=''

illustrates both sequential and random changing.

Note: the code could be simpler [but not much] if the image names were 'numbered' (pic01.jpg, pic02.jpg, pic03.jpg, etc.)

Attachments C.gif 0.11 KB D.gif 0.11 KB H.gif 0.11 KB S.gif 0.11 KB

Thanks fxm. I found another way of doing it aswell.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled Document</title>
      <SCRIPT LANGUAGE="JavaScript">
      var theImages = new Array()
      theImages[0] = 'Picture_Index_Left_Rotate_1.jpg'   
      theImages[1] = 'Picture_Index_Left_Rotate_2.jpg'   
      theImages[2] = 'Picture_Index_Left_Rotate_3.jpg'   
      theImages[3] = 'Picture_Index_Left_Rotate_4.jpg'
      theImages[4] = 'Picture_Index_Left_Rotate_5.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]+'"></a>');
else if(whichImage==1){
document.write('<img src="'+theImages[whichImage]+'"></a>');
else if(whichImage==2){
document.write('<img src="'+theImages[whichImage]+'"></a>');
else if(whichImage==3){
document.write('<img src="'+theImages[whichImage]+'"></a>');
else if(whichImage==4){
document.write('<img src="'+theImages[whichImage]+'"></a>');


  <table width="300" height="400" border="0" cellpadding="0" cellspacing="0">
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.