Random image?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:34

Random image?

Poster: Maz
Dated: Thursday April 1 2004 - 2:23:39 BST

Can I get an image to change when the page changes?

Is there a simple javascript event to rotate 3 images in a menu item?

I'm back, I found a great little site called Andys javascript with just what I needed, now how to fit it in the menu?

Code:

var whichquote=Math.round(Math.random())*3
if (whichquote<=1)
document.write('<img src="/template/main/images/1egg.gif">')
else if (whichquote<=2)
document.write('<img src="/template/main/images/2egg.gif">')
else if (whichquote<=3)
document.write('<img src="/template/main/images/3gg.gif">')

Thanks,
maz

Poster: kevin3442
Dated: Monday April 5 2004 - 23:14:20 BST

Hey Maz,

If I understand correctly, you want a menu item to have a different image each time you load a page... selecting one of three possible images at random each time. Right? What about rollovers... also random?

Cheers,

Kevin

Poster: Maz
Dated: Tuesday April 6 2004 - 0:44:10 BST

Kevin,

Rollovers is not the same, I don't see anything for random images?

The only other thing I could think of would be an image pagematch (not a pagematch image) but we don't have one of those yet.

maz

Poster: kevin3442
Dated: Tuesday April 6 2004 - 0:56:16 BST

Hi Maz,

I guess what I was asking is:

(1) It's not clear to me from your original question... Do you want to load a random image somewhere on the page, outside of the menu, or do you want the image in a specific menu item to be randomly selected from a pool of possible images?

(2) Assuming you want the image in a menu item to be random, will that item also have a rollover image and, if so, should that image also be random?

Kevin

Poster: kevin3442
Dated: Tuesday April 6 2004 - 1:33:49 BST

Hey Maz,

I have to roll on home in a minute, so I'll post this, assuming that you want a random image in a menu item (if not, we'll try again tomorrow):

Suppose you have three images you want to rotate through: egg0.gif, egg1.gif, and egg2.gif. The base name, "egg" in this example, can be anything, but the numbers must start at zero and be consecutive, and they must all be of the same file type (.gif in this case). The following function would randomly select from the three files mentioned above:

Code:

function getRandomImage()
{
  var upperLimit = 2;
  var imagePath = "";
  var baseName = "egg";
  var imageType = ".gif";

  var randomNum = Math.round(Math.random()*upperLimit);
  var fileName = imagePath + baseName + randomNum + imageType;
  return fileName;
}

You could put the function at the top of your menu_data.js file. There are four user-defined parameters at the top of the function. Edit them to fit your situation:

upperLimit = how many images minus 1. In the example at the top, there are three images, so upperLimit = 2, generating random numbes from 0 through 2.

imagePath = where your images are stored, up through the last / that would be in front of the image name. Leave it set to "" (blank) if the images are in the same directory as the page.

baseName = the base name of your image files, up to the number. In the example given at the top, the baseName = "egg".

imageType = the file type of the image files; ".gif" in the example at the top (don't forget the dot!).

To include the random image in a menu item, define the item like so:

Code:

aI("text=item Text;url=whatever.htm;image="+getRandomImage()+";status=whatever;");

Insert menu item properties as usual. In this example, each time the page is loaded, the menu item will randomly show egg0.gif, egg1.gif, or egg2.gif.

The function could be modified to work with multiple menu items, selecting from multiple image "sets".

Hope that helps,

Kevin

Poster: Maz
Dated: Tuesday April 6 2004 - 2:07:59 BST

I'm not seeing the image, tried different ways without the " " in menuitem.

maz

Poster: Ruth
Dated: Tuesday April 6 2004 - 14:35:41 BST

I was able to get it to work. This is what i put in the menu_data.js file

Code:

function getRandomImage() 
{ 
  var upperLimit = 2; 
  var imagePath = ""; 
  var baseName = "xp"; 
  var imageType = ".gif"; 

  var randomNum = Math.round(Math.random()*upperLimit); 
  var fileName = imagePath + baseName + randomNum + imageType; 
  return fileName; 
} 

and this in the item property.

Code:

aI("text=Poetry & More;showmenu=mysite;image="+getRandomImage()+";");

I also tried it in one that had a url, putting it after the url statement.

Ruth

Poster: Maz
Dated: Tuesday April 6 2004 - 15:42:01 BST

Maybe the path is throwing it off?

Couple of other things not working right too.

maz

Poster: Ruth
Dated: Tuesday April 6 2004 - 15:50:14 BST

Honestly, I didn't try it up on the web. Just on my computer will all files in the same folder.

Ruth

Poster: kevin3442
Dated: Tuesday April 6 2004 - 16:30:07 BST

Maz wrote:

I'm not seeing the image, tried different ways without the " " in menuitem.

Hmmm. I'm not sure what you mean here. Do you mean in the imagePath variable? If you use imagePath = " " then it won't work. If your images are in the same directory as the html page, then imagePath = "" (no space between the quotes).

Here's a quick sample page. The "Home" menu item will have a red, green, or blue square next to it, randomly selected when you (re)load the page.

Do you have a test url you could post? Then I could take a quick look.

Kevin

Poster: Maz
Dated: Tuesday April 6 2004 - 16:50:27 BST

Its always on -www- http://mercuryexposure.org

data file

maz

Poster: Ruth
Dated: Tuesday April 6 2004 - 17:28:29 BST

Maz, I have no clue if this affects it or not, but when you click that link it automatically puts in / after org, so maybe you don't need the first / in the path?

Ruth

Poster: Maz
Dated: Tuesday April 6 2004 - 17:57:56 BST

Ruth,

I tried every possible path, except moving the images.

maz

Poster: kevin3442
Dated: Tuesday April 6 2004 - 18:33:51 BST

Maz,

Went to your www but don't get a menu at all??? IE6/NS7.1/Win2k. Does your menu still show up for you?

Kevin

Poster: kevin3442
Dated: Tuesday April 6 2004 - 18:42:42 BST

Maz,

Checked your menu_data.js file. In the getRandomImage() function, you have

Code:

return filename;

It should be

Code:

return fileName;

with an uppercase N. That would explain why your menu is not currently showing up. The rest of the function looks fine. I did notice that you have four "egg" images, so you could set upperLimit=3 if you want to cycle through all four images.

Hope that works,

Kevin

Poster: Maz
Dated: Tuesday April 6 2004 - 18:53:55 BST

Wow how did I miss that, I went over it so many times.

Does it work for you now?

Thanks,
maz

Poster: kevin3442
Dated: Tuesday April 6 2004 - 18:59:03 BST

Maz wrote:

Wow how did I miss that, I went over it so many times.

If I could get back the hours I've spent tracking down an errant paren, missing quote, typo in a variable name, etc... I'd be a couple of years younger!

Quote:

Does it work for you now?

Yes it does! Very nice Easter Eggs. You should do that for all of the holidays!

Kevin

Poster: Maz
Dated: Tuesday April 6 2004 - 19:02:33 BST

That's what I was thinking, something to keep it eventful.

Thank you,
maz

Poster: Maz
Dated: Tuesday April 6 2004 - 23:46:23 BST

Login is not working now...

I took it all off, still no login menu, oh dear

maz

Poster: Maz
Dated: Wednesday April 7 2004 - 22:23:18 BST

Great :!:

maz

Poster: dataminer78
Dated: Friday March 9 2007 - 10:04:33 GMT

Hello! I wanted to use the code presented above in div section of my homepage (to switch background images), but I couldn't cope with it. I created a simple webpage, put images 0.jpg, 1.jpg in the same folder but the code isn't working. Would you have any suggestions?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<head>

<title>Title</title>

<Script language="JavaScript">
function getRandomImage() 
{ 
var upperLimit = 1; 
var imagePath = ""; 
var baseName = ""; 
var imageType = ".jpg"; 
var randomNum = Math.round(Math.random()*upperLimit); 
var fileName = imagePath + baseName + randomNum + imageType; 
return fileName; 
} 
</script>

<style type="text/css">
#headr {
   padding: 0;
   margin: 0;
   position: relative;
   height: 200px;
   background: #3371A3 url(getRandomImage()); no-repeat bottom center;}
</style>

</head>
<body>

<div id="headr" >
Text 
</div>

</body>
</html>

Poster: Ruth
Dated: Friday March 9 2007 - 16:29:42 GMT

Hi,

Hi, are you talking about the demo page with the Item Random Image function on it?

That random image function only works with the Milonic Menu, it is to force a menu item to use a random image.

If you're looking for something just on a webpage you can try ask or google search

js random background images

Ruth

Poster: dataminer78
Dated: Friday March 9 2007 - 21:49:44 GMT

OK, thank you for suggestion.
EDIT: I found an answer on my question on http://www.webmasterworld.com/forum83/4146.htm ("Random image without PHP", script by ocallaghans)

Industrial Strength JavaScript and DHTML Menus

Random image?