randomly change menu

This site is best viewed in a modern browser with JavaScript enabled.

student123

Hi everyone,

I'd really appreciate some help. I've already browsed forums and tutorials but can't find a solution to my problem.

I'm a fourth year art academy student from Holland and I'm trying to spruce up my personal portfolio website. I wrote the website myself, in html. I added the css. I even successfully added a lightbox (which to me is a big deal).

But now I'd like my menu to randomly change... I've got seven menu buttons, they are in a map in the map images. In the map images I've added 5 or 6 more maps with each 7 menu images. I want the page to randomly pick one of the 6 maps and then use the pictures in that map to make the menu. And then I get lost...

Here is what I've tried, but nothing really happens... help!? I guess its actually not hard, its just my skills in javascript, I don't really get it.

<html>
<head>
<title>Contact/About</title>
<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>

<body>

<div id="menu">
	<script>
		mijnmenu = ['images/pl2/menubalpen','images/pl2/menugeo','images/pl2/menuinkt','images/pl2/menukleur','images/pl2/menupotlood','images/pl2/menusephia'];
		mijnmenu = [Math.floor(Math.random()*6)]+'/'+'menu1.jpg';
		mijnmenu+'/'+'menu2.jpg'
		mijnmenu+'/'+'menu3.jpg'
		mijnmenu+'/'+'menu4.jpg'
		mijnmenu+'/'+'menu5.jpg'
		mijnmenu+'/'+'menu6.jpg'
		mijnmenu+'/'+'menu7.jpg'
	</script>
	<a href="index.html"><img src="images/pl2/mijnmenu/menu1.jpg" /></a>
	<a href="drawings.html"><img src="images/pl2/mijnmenu/menu2.jpg" /></a>
	<a href="typo.html"><img src="images/pl2/mijnmenu/menu3.jpg" /></a>
	<a href="photo.html"><img src="images/pl2/mijnmenu/menu4.jpg" /></a>		
	<a href="movies.html"><img src="images/pl2/mijnmenu/menu5.jpg" /></a>
	<a href="other.html"><img src="images/pl2/mijnmenu/menu6.jpg" /></a>
	<a href="contact.html"><img src="images/pl2/mijnmenu/menu7.jpg" /></a>	
</div>	

<div id="largecolumn">
	<br />
	<br />
	<br />
	<left>
	text
	</left>
</div>

</div>

</body>

</html>

JMRKER

I'm not exactly sure what is is that you are trying to do here, so this is just a SWAG.
I'm not sure why you would want to changes the images of your menu links, but it's your logic, so I'm going with it.

<html>
<head>
<title>Contact/About</title>

<!-- external files not available for this test
<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
-->

</head>
<body onload="randomizeMenu()">
<div id="wrapper">
 <div id="menu">
  <a href="index.html"><img src="" height="50" width="40" /></a>
  <a href="drawings.html"><img src="" height="50" width="40" /></a>
  <a href="typo.html"><img src="" height="50" width="40" /></a>
  <a href="photo.html"><img src="" height="50" width="40" /></a>
  <a href="movies.html"><img src="" height="50" width="40" /></a>
  <a href="other.html"><img src="" height="50" width="40" /></a>
  <a href="contact.html"><img src="" height="50" width="40" /></a>
 </div>
 <!-- for testing purposes only -->
 <button onclick="randomizeMenu()">Randomize Display</button>

 <div id="largecolumn">
 <br /> <br /> <br /> text
 </div>
</div>

<script type="text/javascript">
function randomSort(a,b) {
    return( parseInt( Math.random()*10 ) %2 );
}
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var mijnmenu = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg','22.jpg'];

function randomizeMenu() {
  var rndMenu = mijnmenu.sort(randomSort);
  var menuObj = document.getElementById('menu').getElementsByTagName('img');
  for (var i=0; i<menuObj.length; i++) {
    menuObj[i].src = baseURL+rndMenu[i];
  }
}

</script>
</body>
</html>

Your main problem is how you initialize the mijnmenu array. It totally won't work that way.
Modify the 'baseURL' variable to your path as I did not have your images to view.
Also modify the filenames of the images located in the "mijnmenu" array.

Note: The button is just for testing the randomize feature. Remove it when done testing.

BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces)
to make it easier for others to evaluate your problem.

student123

Thank you very much for your quick reply, I've tried the code you've written but I still can't get it to work. I'm close though, I think, because there are little black squares that are click able and do direct me to the right pages.
Maybe I've explained my problem wrong; In my images folder I've got 6 other folders in each of which are 7 interchangeable pictures, they all say the same (menu1.jpg says: menu, menu2.jpg says: drawings, etc. but all in different writing, that's why I want them to change). I need the website to change the menu on each reload/load, e.a. when you click one of the menu buttons.
Or maybe I've flunked on the code... also a very solid possibility. Sorry.

<html>
<head>
<title>Contact/About</title>

<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

</head>
<body onload="randomizeMenu()">
<div id="wrapper">
 <div id="menu">
  <a href="index.html"><img src="menu1.jpg" /></a>
  <a href="drawings.html"><img src="menu2.jpg" /></a>
  <a href="typo.html"><img src="menu3.jpg" /></a>
  <a href="photo.html"><img src="menu4.jpg" /></a>
  <a href="movies.html"><img src="menu5.jpg" /></a>
  <a href="other.html"><img src="menu6.jpg" /></a>
  <a href="contact.html"><img src="menu7.jpg" /></a>
 </div>

 <div id="largecolumn">
 <br /> 
 <br /> 
 <br /> 
 My name is Kat -, and I'm currently studying at -.
 <br /> 
 For more information, or if you have any questions or remarks, you can always contact me by mail!<br />
 <a href="mailto:kat@.nl">@: kat@.nl</a>
 </div>
</div>

<script type="text/javascript">
function randomSort(a,b) {
    return( parseInt( Math.random()*10 ) %2 );
}
<!-- I didn't know whether to put down the whole path, or just the file names tried both though-->
var baseURL = 'http://www.mysite.nl/images/pl2/';
var mijnmenu = ['http://www.mysite.nl/images/pl2/menubalpen','http://www.mysite.nl/images/pl2/menugeo','http://www.mysite.nl/images/pl2/menuinkt','http://www.mysite.nl/images/pl2/menukleur','http://www.mysite.nl/images/pl2/menupotlood','http://www.mysite.nl/images/pl2/menusephia'];

function randomizeMenu() {
  var rndMenu = mijnmenu.sort(randomSort);
  var menuObj = document.getElementById('menu').getElementsByTagName('img');
  for (var i=0; i<menuObj.length; i++) {
    menuObj[i].src = baseURL+rndMenu[i];
  }
}

</script>
</body>
</html>

JMRKER

You have a couple of problems that need to be fixed:

The links to the 'mijnmenu' array all appear to go to the same place (?)
The images of the 'menu' <div> do not display.
You have fewer links in the 'mijnmenu' array than you have images and links in the 'menu' section.
Totally my fault, but I cannot read what your menu links are saying.

Do you have a live link?

Notes:
You have only to use the single file name in the mijnmenu array as the baseURL provides the rest of the path.
You are missing the last [ /code] tag (without the space) at the end of your last post

student123

my site is www.katjadevries.nl

And this:

You have fewer links in the 'mijnmenu' array than you have images and links in the 'menu' section.

Is correct, because I want the site to choose a map, but then the images in each map have the same name and place on the site. Just the map needs to be random...

JMRKER

student123;1188573 wrote:
my site is www.katjadevries.nl

And this:

You have fewer links in the 'mijnmenu' array than you have images and links in the 'menu' section.

Is correct, because I want the site to choose a map, but then the images in each map have the same name and place on the site. Just the map needs to be random...

OK, I see you link, but I'm still confused as to what it is that you wish to happen.

Do you want the images on the left side of the page change order of display each time the page is reloaded/refreshed?
When the image order changes, you want any clicks on the left menu images to still go to
the correct page as identified by the image?
Is the 'map' you are referring to the image on the left side with the menu topics?

Is that the jist of what you wish to happen?

student123

No, I'm so sorry, I knew my problem isn't that clear.

The thing is I have 6 handwritten menu's. The one displayed now is the first, but I have made 5 more, in different styles of writing, one in ballpoint, one in ink, one in colour, all of them in a different writing/drawing style.

I want my website to pick one style to display each time.

I've put all the different menu's in files.

so (I'm Dutch, hence the crazy file names):
webweb>images>pl2>menubalpen> (7pictures)
webweb>images>pl2>menugeo> (7pictures)
webweb>images>pl2>menuinkt> (7pictures)
webweb>images>pl2>menukleur> (7pictures)
webweb>images>pl2>menupotlood> (7pictures)
webweb>images>pl2>menusephia> (7pictures)

In each of these maps you can find the same words/pictures, only differently drawn.

So in each map theres a
menu1.jpg (which says menu)
menu2.jpg (which says drawings)
menu3.jpg (typography)
menu4.jpg (photo)
menu5.jpg (movies)
menu6.jpg (other)
menu7.jpg (contact)

I want the website to pick a map. And then display the same menu but the differently drawn 'pictures'. So essentially the menu stays the same only a different look.

I hope you get it now?
Thanks for your help!

JMRKER

Try this code out. I do not know your alternate menu image filenames
so you will need to change them from the dummy names in the "imgList" array.
It should work, but I cannot check this out without the filenames.
(Note: This also assumes all the menu images are in the same baseURL+imgPath directory)

Take out the testing code when you are happy with the results.

<html>
<head>
<title>Katja de Vries - Home</title>
<link type="text/css" rel="stylesheet"
 href="http://www.katjadevries.nl/css/desktop.css" media="screen" />
<script type="text/javascript"
 src="http://www.katjadevries.nl/js/prototype.js"></script>
<script type="text/javascript"
 src="http://www.katjadevries.nl/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript"
 src="http://www.katjadevries.nl/js/lightbox.js"></script>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1188629#post1188629

var baseURL = 'http://www.katjadevries.nl/';
var imgPath = 'images/pl2/menukleur/';
var imgList = [
   ["menu1.jpg","menu1a.jpg","menu1b.jpg","menu1c.jpg","menu1d.jpg","menu1e.jpg"],
   ["menu2.jpg","menu2a.jpg","menu2b.jpg","menu2c.jpg","menu2d.jpg","menu2e.jpg"],
   ["menu3.jpg","menu3a.jpg","menu3b.jpg","menu3c.jpg","menu3d.jpg","menu3e.jpg"],
   ["menu4.jpg","menu4a.jpg","menu4b.jpg","menu4c.jpg","menu4d.jpg","menu4e.jpg"],
   ["menu5.jpg","menu5a.jpg","menu5b.jpg","menu5c.jpg","menu5d.jpg","menu5e.jpg"],
   ["menu6.jpg","menu6a.jpg","menu6b.jpg","menu6c.jpg","menu6d.jpg","menu6e.jpg"],
   ["menu7.jpg","menu7a.jpg","menu7b.jpg","menu7c.jpg","menu7d.jpg","menu7e.jpg"]
];

function randomMenu() {
  var sel = document.getElementById('menu').getElementsByTagName('img');
  var rnd = Math.floor(Math.random()*6);  // 6 is number of alt image text for menu
//  rnd = 0;  // for testing purposes only
  var str = '';  // for testing purposes only

  for (var i=0; i<sel.length; i++) {
    sel[i].src = baseURL+imgPath+imgList[i][rnd];
    sel[i].alt = baseURL+imgPath+imgList[i][rnd];
    sel[i].title = baseURL+imgPath+imgList[i][rnd];

str += '\n'+sel[i].alt;  // for testing purposes only
  }

  alert('Menu #'+rnd+'\n'+str);  // for testing purposes only
}
window.onload = function() { randomMenu(); }
</script>

<style type="text/css">
#menu.img { border:2px solid red; }
</style>

</head>

<body>

<div id="wrapper">

 <div id="menu"><br />
  <a href="http://www.katjadevries.nl/index.html"><img src="" alt="" title="" /></a>
  <a href="http://www.katjadevries.nl/drawings.html"><img src="" alt="" title="" /></a>
  <a href="http://www.katjadevries.nl/typo.html"><img src="" alt="" title="" /></a>
  <a href="http://www.katjadevries.nl/photo.html"><img src="" alt="" title="" /></a>		
  <a href="http://www.katjadevries.nl/movies.html"><img src="" alt="" title="" /></a>
  <a href="http://www.katjadevries.nl/other.html"><img src="" alt="" title="" /></a>
  <a href="http://www.katjadevries.nl/contact.html"><img src="" alt="" title="" /></a>	
 </div>

 <div id="largecolumn">
  <img src="http://www.katjadevries.nl/images/boeken.jpg" />
  <p>This website contains a selection of my work - old and new.
 On your left you'll find the menu, which will guide you through the pages...
  <br />You can click on each detail to see the whole picture, and get a description. 
  <p>You can always <a href="http://www.katjadevries.nl/contact.html">contact me</a></p>
 </div>

</div>
</body>
</html>

Note also you have some errors in the external CSS code.
In particular, "backgroundcolor" probably should be "background-color"
There are some others if you look at the FF or Chrome error console.

student123

JMRKER,
Thanks for your help, I figured it out, it is FINALLY working! Thank you so very much for helping me out!

JMRKER

student123;1188648 wrote:
JMRKER,
Thanks for your help, I figured it out, it is FINALLY working! Thank you so very much for helping me out!

You're most welcome.
Happy to help (when I can understand the problem).
Good Luck!