View Full Version : Resolved Adding Links to Random Pictures?

Jul 16th, 2011, 10:33 PM
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 :thumbsup:

Here's my current JS 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:

<script language="JavaScript">

Sorry for being so green with JS :(

Jul 16th, 2011, 10:56 PM
Try this...

<title>Random Gallery Links</title>
<script type="text/javascript">

var imgLinks = [
// format: ['imageSource','imageLinkURL'],
['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;

function GoToURL(URL) { document.location.href = URL; }

onload = function () { RandomLink(); }

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

Easy to expand.

Jul 16th, 2011, 11:46 PM
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")?

Jul 17th, 2011, 02:43 AM
Three minor changes...

<style type="text/css">
#Pics {
cursor:pointer; height:300px; width:400px;


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);

<img id="Pics" src="" alt="" onclick="GoToURL(this.alt)"><br>

Jul 17th, 2011, 03:38 AM
Thanks a bunch!!! It worked very nicely, with just a couple of tweaks to the pic styles!!!!

Jul 17th, 2011, 03:41 AM
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! :)

Aug 18th, 2011, 01:32 AM
Thanks, work nice. ;)

I'm glad we could help you as well! :D