Random image?

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Random image?

Post by Maz »

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: Select all

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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: Select all

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: Select all

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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

maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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

Code: Select all

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: Select all

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Maybe the path is throwing it off?

Couple of other things not working right too.

maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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

Ruth
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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

data file

maz
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Ruth,

I tried every possible path, except moving the images.

maz
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Maz,

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

Code: Select all

return filename;
It should be

Code: Select all

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
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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

Does it work for you now?

Thanks,
maz
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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!
Does it work for you now?
Yes it does! Very nice Easter Eggs. You should do that for all of the holidays!

Kevin
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

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

Thank you,
maz
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Login is not working now... :?

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

maz
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Great :!:

Login is fixed now and had nothing to do with the easter egg hunt.

I'm going to put the random eggs back in. :D

maz
Post Reply