Member Avatar for Takkies

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

  • 2 Contributors
  • 4 Replies
  • 125 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Takkies
Member Avatar for fxm

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.

Member Avatar for Takkies

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.

Member Avatar for fxm

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <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])

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

}
    </script>
    <title></title>
  </head>
  <body onload="chgImgs()">
    <div onclick="chgImgs()">
      Product
    </div><img id='imgA' src='' name="imgA"> <img id='imgB' src=''
    name="imgB">
  </body>
</html>

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.)

C.gif 0.11 KB D.gif 0.11 KB H.gif 0.11 KB S.gif 0.11 KB
Member Avatar for Takkies

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">
<head>
<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(){
if(whichImage==0){
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>');
}

}
       
      
      </script>
</head>

<body>
<div>
  
  <table width="300" height="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><script>showImage();</script></td>
    </tr>
  </table>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.