...

View Full Version : Javascript random menu picture



student123
01-19-2012, 04:59 PM
Hi everyone,

I'd really appreciate some help, I'm trying to make the menu of my website randomly change. I have 6 different image folders in which there are 7 pictures which all read the same things (menu, drawings, photo's etc) but in different writing.
I want the website to (when refreshed, or when somebody clicks on one of the menu buttons) randomly pick a folder each time, and use the images of that folder.
So the images are all the same name, just the folder needs changing.

This is what I have so far (thanks to another forum aswell), which doesn't work. I'm very new to javascript... I can't really 'read' what is says, unlike html and/or css. I 'get' html and css. This really frustrates me. Help?!?!

btw: I took everything out that doesn't concern this problem, for easier reading.



<html>
<head>
<title></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>

<script type="text/javascript">
function randomSort(a,b) {
return( parseInt( Math.random()*6 ) %2 );
}
var baseURL = 'http://www.SITE.nl/';
var mijnmenu = ['images/pl2/menubalpen','images/pl2/menugeo','images/pl2/menuinkt','images/pl2/menukleur','images/pl2/menupotlood','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]+'img';
}
}

</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">
TEXT
</div>
</div>
</body>
</html>

xelawho
01-19-2012, 05:18 PM
try this, or maybe it is too random for you?



function randomSort(a,b) {
return( parseInt( Math.random()*6 ) %2 );
}
var baseURL = 'http://www.katjadevries.nl';
var mijnmenu = ['images/pl2/menubalpen','images/pl2/menugeo','images/pl2/menuinkt','images/pl2/menukleur','images/pl2/menupotlood','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]+'/menu'+[i+1]+'.jpg';
}
}

student123
01-19-2012, 11:35 PM
I got it to work, thanks for your quick reply!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum