The getRandomImage() function allows you to load random images into menu items.
To activate the function in the above menu, reload the page and watch the image changes.
To use the getRandomImage() function:
Place the following code at the top of your menu_data.js file
var upperLimit = 2;
var imagePath = "";
var baseName = "picture";
var imageType = ".gif";
var randomNum = Math.round(Math.random()*upperLimit);
var fileName = imagePath + baseName + randomNum + imageType;
- The images must have the same ending, i.e. .gif or .jpg etc. You cannot mix file types.
- All images used must have the same beginning name followed by a number. The numbers must be in sequence. In this example the image is .gif, named picture, so the files are named picture0.gif, picture1.gif, picture2.gif
- There are four parameters at the top of the function that the user can define and edit:
- 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 this example the baseName = "picture"
- 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:
- Insert menu item properties as usual. In this example, each time the page is loaded, the menu item will randomly show picture0.gif, picture1.gif, or picture2.gif.