Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript random menu picture

    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.

    Code:
    <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>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    try this, or maybe it is too random for you?

    Code:
    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';
      }
    }

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to work, thanks for your quick reply!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •