www.webdeveloper.com
Results 1 to 3 of 3

Thread: random image?

  1. #1
    Join Date
    Jun 2006
    Posts
    18

    random image?

    i have a script that outputs 4 random images from a folder, along with each images' corresponding headline and sub copy:

    HTML Code:
    var imagenumber = 4 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
    
    var randomnumber2 = Math.random() ;
    var rand2 = Math.round( (imagenumber-1) * randomnumber2) + 1 ;
    
    var randomnumber3 = Math.random() ;
    var rand3 = Math.round( (imagenumber-1) * randomnumber3) + 1 ;
    
    var randomnumber4 = Math.random() ;
    var rand4 = Math.round( (imagenumber-1) * randomnumber4) + 1 ;
     
     
    images = new Array
    images[1] = "images/Highlights/H-1.jpg"
    images[2] = "images/Highlights/H-2.jpg"
    images[3] = "images/Highlights/H-3.jpg"
    images[4] = "images/Highlights/H-4.jpg"
    
    var image1 = images[rand1]
    var image2 = images[rand2]
    var image3 = images[rand3]
    var image4 = images[rand4]
    
     
    links = new Array
    links[1] = "#"
    links[2] = "#"
    links[3] = "#"
    links[4] = "#"
    
    var link1 = links[rand1]
    var link2 = links[rand2]
    var link3 = links[rand3]
    var link4 = links[rand4]
     
     
    var H_Head=new Array() 
    H_Head[1] = "H-1 Headline";
    H_Head[2] = "H-2 Headline";
    H_Head[3] = "H-3 Headline";
    H_Head[4] = "H-4 Headline";
    
    var H_Copy=new Array() 
    H_Copy[1] = "H-1 Copy";
    H_Copy[2] = "H-2 copy";
    H_Copy[3] = "H-3 copy";
    H_Copy[4] = "H-4 copy";
    
     
    document.getElementById("highlight_1").innerHTML = ('<A HREF="' + link1 + '"><IMG SRC="' + image1 + '" border="0" height="157" width="225"></a>');
    document.getElementById("highlightHead_1").innerHTML = (H_Head[rand1]);
    document.getElementById("highlightCopy_1").innerHTML = (H_Copy[rand1]);
    
    document.getElementById("highlight_2").innerHTML = ('<A HREF="' + link2 + '"><IMG SRC="' + image2 + '" border="0" height="157" width="225"></a>');
    document.getElementById("highlightHead_2").innerHTML = (H_Head[rand2]);
    document.getElementById("highlightCopy_2").innerHTML = (H_Copy[rand2]);
    
    document.getElementById("highlight_3").innerHTML = ('<A HREF="' + link3 + '"><IMG SRC="' + image3 + '" border="0" height="157" width="225"></a>');
    document.getElementById("highlightHead_3").innerHTML = (H_Head[rand3]);
    document.getElementById("highlightCopy_3").innerHTML = (H_Copy[rand3]);
    
    document.getElementById("highlight_4").innerHTML = ('<A HREF="' + link4 + '"><IMG SRC="' + image4 + '" border="0" height="157" width="225"></a>');
    document.getElementById("highlightHead_4").innerHTML = (H_Head[rand4]);
    document.getElementById("highlightCopy_4").innerHTML = (H_Copy[rand4]);
    how can i make the 4 random images unique? i have looked up unique random javascript numbers but cannot fathom how to incorporate this into my code above. any help would be most apreciated! thanks.

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    This might give you some ideas. In the following minj will either be zero or one depending on whether the user has chosen to make the first occurrence be included in the random list or not so you can take it out. As each entry is chosen it is replaced by the entry currently at the end of the array. This is set for an array of 12 items, so change 12 and 11 accordingly.
    Code:
        for (i=0; i < 12; i++)
          deck[i] = i;
    
        for (j = 11; j >= minj; j--) {
          var r = Math.floor(Math.random() * (j-minj+1)) + minj; // Pick one from those remaining
          seltab[j] = deck[r];
          deck[r] = deck[j]; }	  // Move last of those remaining to slot just chosen
    HTH

  3. #3
    Join Date
    Jun 2006
    Posts
    18
    thanks for the reply. i will mess around with what you have provided; it looks like a nice clean way of accomplishing what i am trying to do. i have been able to solve the problem on my own, tho i am sure it isnt a pretty way of achieving it. see below if you wish:

    HTML Code:
    /*-----------dont change this code ----------------*/
    
    // addLoadEvent 
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    addLoadEvent(swap);
    
    function swap() {
    if (!document.getElementById) { return;}
    preload_image_object = new Image();
    /*-----------end of dont change this code ----------------*/
    
    var rndimg = new Array ()
    rndimg[0] = ("images/Highlights/Highlight_1.jpg");
    rndimg[1] = ("images/Highlights/Highlight_2.jpg");
    rndimg[2] = ("images/Highlights/Highlight_3.jpg");
    rndimg[3] = ("images/Highlights/Highlight_4.jpg");
    rndimg[4] = ("images/Highlights/Highlight_5.jpg");
    rndimg[5] = ("images/Highlights/Highlight_6.jpg");
    rndimg[6] = ("images/Highlights/Highlight_7.jpg");
    rndimg[7] = ("images/Highlights/Highlight_8.jpg");
    rndimg[8] = ("images/Highlights/Highlight_9.jpg");
    
    var H_Head=new Array() 
    H_Head[0] = ('<A HREF="http://www.1.com">H-1 Headline</a>');
    H_Head[1] = ('<A HREF="http://www.2.com">H-2 Headline</a>');
    H_Head[2] = ('<A HREF="http://www.3.com">H-3 Headline</a>');
    H_Head[3] = ('<A HREF="http://www.4.com">H-4 Headline</a>');
    H_Head[4] = ('<A HREF="http://www.5.com">H-5 Headline</a>');
    H_Head[5] = ('<A HREF="http://www.6.com">H-6 Headline</a>');
    H_Head[6] = ('<A HREF="http://www.7.com">H-7 Headline</a>');
    H_Head[7] = ('<A HREF="http://www.8.com">H-8 Headline</a>');
    H_Head[8] = ('<A HREF="http://www.9.com">H-9 Headline</a>');
    
    var H_Copy=new Array() 
    H_Copy[0] = "H-1 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[1] = "H-2 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[2] = "H-3 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[3] = "H-4 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[4] = "H-5 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[5] = "H-6 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[6] = "H-7 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[7] = "H-8 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    H_Copy[8] = "H-9 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim";
    
    
    /*-----------dont change this code ----------------*/
    
    var numimages = rndimg.length-1;
    var min = 0;
    var max = numimages;
    var count =4;
    var lookup=[], range=max-min+1, num;  
     for(var i=0; i<count; i++)
     {
      while( !isNaN(lookup[ (num = min + Math.floor(Math.random()*range))+'r']) )
      ;
      lookup[i]=lookup[num+'r']=num;
     }
    
     var j = 0;
      for(j=0; j<=numimages; j++) 
          preload_image_object.src = rndimg[j];
    	  
    /*-----------end of dont change this code ----------------*/
    
    var randomimage1=(rndimg[lookup[0]]);
    var randomimage2=(rndimg[lookup[1]]);
    var randomimage3=(rndimg[lookup[2]]);
    var randomimage4=(rndimg[lookup[3]]);
    
    var randomheadline1=(H_Head[lookup[0]]);
    var randomheadline2=(H_Head[lookup[1]]);
    var randomheadline3=(H_Head[lookup[2]]);
    var randomheadline4=(H_Head[lookup[3]]);
    
    var randomsubtext1=(H_Copy[lookup[0]]);
    var randomsubtext2=(H_Copy[lookup[1]]);
    var randomsubtext3=(H_Copy[lookup[2]]);
    var randomsubtext4=(H_Copy[lookup[3]]);
    
    document.getElementById("highlight_1").src = randomimage1;
    document.getElementById("highlight_2").src = randomimage2;
    document.getElementById("highlight_3").src = randomimage3;
    document.getElementById("highlight_4").src = randomimage4;
    
    document.getElementById("highlightHead_1").innerHTML = randomheadline1;
    document.getElementById("highlightHead_2").innerHTML = randomheadline2;
    document.getElementById("highlightHead_3").innerHTML = randomheadline3;
    document.getElementById("highlightHead_4").innerHTML = randomheadline4;
    
    document.getElementById("highlightCopy_1").innerHTML = randomsubtext1;
    document.getElementById("highlightCopy_2").innerHTML = randomsubtext2;
    document.getElementById("highlightCopy_3").innerHTML = randomsubtext3;
    document.getElementById("highlightCopy_4").innerHTML = randomsubtext4;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles