View Full Version : Resolved Adding Links to Random Pictures?

07-16-2011, 09: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 :(

07-16-2011, 09: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.

07-16-2011, 10: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")?

07-17-2011, 01: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>

07-17-2011, 02:38 AM
Thanks a bunch!!! It worked very nicely, with just a couple of tweaks to the pic styles!!!!

07-17-2011, 02: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! :)

08-18-2011, 12:32 AM
Thanks, work nice. ;)

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