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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Adding Links to Random Pictures?

    On my website, I have random logos appear on the home page as products that I recommend. I would like to make these logos into links to the website they are from, so that when one clicks on the picture, it directs you to the site, but I can't quite get it to work, and I know very little about Javascript (as you may know from my previous question about Javascript). If someone could help me crack the code, that would be great

    Here's my current JS code:

    Code:
    <!--
    
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array. Rememeber
    // to increment the theImages[x] index!
    
    theImages[0] = 'http://i200.photobucket.com/albums/aa216/Jilldear/classicequinelogo-1.jpg'
    theImages[1] = 'images/logo2.jpg'
    theImages[2] = 'http://i200.photobucket.com/albums/aa216/Jilldear/pyranha-1.jpg'
    
    // ======================================
    // do not change anything below this line
    // ======================================
    
    var j = 0
    var p = theImages.length;
    
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
       preBuffer[i] = new Image()
       preBuffer[i].src = theImages[i]
    }
    
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
    }
    
    //-->

    And my current HTML code:

    Code:
    <script language="JavaScript">
    <!--
    showImage();
    //-->
    </script>

    Sorry for being so green with JS
    Last edited by RomeosKlassicDJ; 07-17-2011 at 02:40 AM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Try this...
    Code:
    <html>
    <head>
    <title>Random Gallery Links</title>
    <script type="text/javascript">
    
    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>
    Easy to expand.

  • Users who have thanked jmrker for this post:

    RomeosKlassicDJ (07-17-2011)

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you very much. Two questions, though: is it possible to make it so that the "link cursor" (don't know what it's called, it's the little hand in most browsers) appears over the picture? Because the cursor doesn't change when you mouse over. And also, how can I modify this code so that when the user clicks on the picture the link goes into a new window (target="_blank")?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Three minor changes...
    Code:
    <style type="text/css">
    #Pics {
      cursor:pointer; height:300px; width:400px;
    </style>
    and
    Code:
    function GoToURL(URL) {
    // document.location.href = URL;
      window.open(URL, 'HomePage', 'location=yes,toolbar=yes,menubar=yes,directories=yes,status=yes,resizable=yes,scrollbars=yes,height=480,width=640', false);
    }
    Code:
      <img id="Pics" src="" alt="" onclick="GoToURL(this.alt)"><br>

  • Users who have thanked jmrker for this post:

    RomeosKlassicDJ (07-17-2011)

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    42
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks a bunch!!! It worked very nicely, with just a couple of tweaks to the pic styles!!!!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by RomeosKlassicDJ View Post
    Thanks a bunch!!! It worked very nicely, with just a couple of tweaks to the pic styles!!!!
    You're most welcome.
    Happy to help.
    Good Luck!

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by tzartzar View Post
    Thanks, work nice.
    I'm glad we could help you as well!


  •  

    Posting Permissions

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