www.webdeveloper.com
Results 1 to 8 of 8

Thread: Mutliple random images with 'personal' links

  1. #1
    Join Date
    Nov 2010
    Posts
    4

    Mutliple random images with 'personal' links

    Hello all,

    I've been searching the net for a while, for the easiest multiple random images code and found it. But now I've also been searching for a script to link all single images to a different link (link z1.jpg to home.html, z2.jpg to contact.html, x1 to banana.html, etc.).

    This is the script I'm using:
    Code:
    <script language="javascript">
    <!--
    var gallery = new Array();
    gallery[0] = new Array("z1.jpg","z2.jpg","z3.jpg","z4.jpg","z5.jpg");
    gallery[1] = new Array("y1.jpg","y2.jpg","y3.jpg","y4.jpg","y5.jpg");
    gallery[2] = new Array("x1.jpg","x2.jpg","x3.jpg","x4.jpg","x5.jpg", "x6.jpg");
    gallery[3] = new Array("w1.jpg","w2.jpg","w3.jpg","w4.jpg","w5.jpg");
    gallery[4] = new Array("v1.jpg","v2.jpg","v3.jpg","v4.jpg","v5.jpg");
    
    function pickImageFrom(whichGallery)
    {
    var idx = Math.floor(Math.random() * gallery[whichGallery].length);
    document.write('<img src="images/' + gallery[whichGallery][idx] + '">');
    }
    //-->
    </script>
    This is what i place in where the image schould be placed:
    Code:
    <script language="javascript">pickImageFrom(0);</script>
    Please help!
    Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Something to try ...

    Here's something a little more recent than that older code:
    Code:
    <html>
    <head>
    <title>Random Gallery Links</title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=238170
    
    var imgLinks = [
    // format: ['imageSource','imageLinkURL'],
      ['http://www.nova.edu/hpd/otm/pics/4fun/11.jpg','http://www.webdeveloper.com'],
      ['http://www.nova.edu/hpd/otm/pics/4fun/12.jpg','http://www.google.com'],
      ['http://www.nova.edu/hpd/otm/pics/4fun/13.jpg','http://www.yahoo.com'],
      ['http://www.nova.edu/hpd/otm/pics/4fun/14.jpg','http://www.bing.com'],
      ['http://www.nova.edu/hpd/otm/pics/4fun/15.jpg','http://www.codingforums.com'],
      ['http://www.nova.edu/hpd/otm/pics/4fun/21.jpg','http://www.dreamincode.net']	// NOTE: no comma after last entry
    ];
    
    function SetImage(IDS,imgPtr) {
      imgPtr = parseInt(imgPtr);
      document.getElementById(IDS).src = imgLinks[imgPtr][0];
      document.getElementById(IDS).alt = imgLinks[imgPtr][1];
      document.getElementById('Captions').innerHTML = imgLinks[imgPtr][1];
    }
    
    function RandomLink() {
      var R = Math.random() * imgLinks.length;
      SetImage('Pics',R);
    }
    
    function GoToURL(URL) { document.location.href = URL; }
    
    onload = function () { RandomLink(); }
    
    </script>
    </head>
    <body>
      <img id="Pics" height="425" width="600" src="" alt="" onclick="GoToURL(this.alt)"><br>
      <span id="Captions"></span>
      <button onclick="RandomLink()">Random Change (for testing)</button>
    </body>
    </html>
    Change the images and links in the 'imgLinks' array to match your needs.
    Click on the image to go to the link URL
    Remove the test button when you are finished testing.

    Good Luck!

  3. #3
    Join Date
    Nov 2010
    Posts
    4
    Thanks a lot! I got this working.
    But the problem is I need more random images, now I've got only one,...

    Thanks!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Don't quite understand the problem ... works fine for me!

    Quote Originally Posted by Stronk View Post
    Thanks a lot! I got this working.
    But the problem is I need more random images, now I've got only one,...

    Thanks!
    You're most welcome.
    Happy to help.
    Good Luck!


    BTW: Why the problem? What do you mean that you "need more random images"?
    Problems with the script or problems obtaining images to display?

  5. #5
    Join Date
    Nov 2010
    Posts
    4
    No, you gave me the script for just one random image with links.

    Also helpfull,

    but this is what I needed:
    Code:
    <script=javascript>
    var gallery = new Array();
    gallery[0] = new Array("z1.jpg","z2.jpg","z3.jpg","z4.jpg","z5.jpg");
    gallery[1] = new Array("y1.jpg","y2.jpg","y3.jpg","y4.jpg","y5.jpg");
    gallery[2] = new Array("x1.jpg","x2.jpg","x3.jpg","x4.jpg","x5.jpg", "x6.jpg");
    gallery[3] = new Array("w1.jpg","w2.jpg","w3.jpg","w4.jpg","w5.jpg");
    gallery[4] = new Array("v1.jpg","v2.jpg","v3.jpg","v4.jpg","v5.jpg");
     
    var links = new Array();
    links[0] = new Array("home.html","about.html",...);
    links[1] = ...;
    ...
     
     
    function pickImageFrom(whichGallery)
    {
    var idx = Math.floor(Math.random() * gallery[whichGallery].length);
    document.write('<a href="'+links[whichGallery][idx]+'"><img src="images/' + gallery[whichGallery][idx] + '"></a>');
    }
    </script>
    Thanks for the help!

  6. #6
    Join Date
    May 2009
    Posts
    100
    This code is good.

    Code:
    var topImages = new Array()
    
    //Random-loading images
    topImages[0] = 'http://www.domain.com/img1.png' // replace with names of images
    topImages[1] = 'http://www.domain.com/img2.png' // replace with names of images
    
    
    var j = 0
    var p = topImages.length;
    var preBuffer = new Array()
    
    for (i = 0; i < p; i++){
    preBuffer[i] = new Image()
    preBuffer[i].src = topImages[i]
    }
    var chooseImage = Math.round(Math.random()*(p-1));
    
    function topImage(){
    if(chooseImage==0){
    document.write('<a href ="http://www.domain.com/link3" rel="nofollow"><img src="'+topImages[chooseImage]+'" border=0 width=980 height=60></a>');
    }
    else if(chooseImage==1){
    document.write('<a href ="http://www.domain.com/link2" rel="nofollow"><img src="'+topImages[chooseImage]+'" border=0 width=980 height=60></a>');
    }
    }

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Exclamation Don't quite understand the problem ... works fine for me!

    What code are you using?
    Did you try to execute the code of post #2?

    Substitute your information (which you have not provided) into this array:
    Code:
    var imgLinks = [
    // format: ['imageSource','imageLinkURL'],
      ['z1.jpg','home.html'],
    ... continue with your assignments per format above ...
      ['z2.jpg','about.html']      // NOTE: no comma after last entry
    ];
    Please explain what problems you are having ... I don't understand.

  8. #8
    Join Date
    Nov 2010
    Posts
    4
    I solved my problem with the last code I posted.
    It provides 5 random images with each 5 images.
    Those 25 images now have a seperate link!

    Thanks!

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles