General Question

derektherock42's avatar

How do I make a picture in an HTML script a clickable link?

Asked by derektherock42 (201points) December 27th, 2009

I’ve been busy building a website for the last couple weeks, and one of the things I did was make the site’s logo (in the upper-left corner) a random picture, so it would randomly show different versions of that logo. I did that using javascript looking something like this:

var altLogos = new Array()

altLogos[0] = ‘altSiteLogo1.gif’
altLogos[1] = ‘altSiteLogo2.gif’
altLogos[2] = ‘altSiteLogo3.gif’
altLogos[3] = ‘altSiteLogo4.gif’

var j = 0
var p = altLogos.length;
var preBuffer = new Array()
for (i = 0; i < p; i++)
{
preBuffer[i] = new Image()
preBuffer[i].src = altLogos[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage()
{
document.write(’<img src=”’+altLogos[whichImage]+’”>’);
}

And then in the <body>,

showImage();

However, I want to make the logo a clickable link, where when you click it, it takes you to the home page. Does anybody with HTML and Javascript knowledge know how to do this? Thanks!

Observing members: 0 Composing members: 0

11 Answers

phoenyx's avatar

document.write(”<a href=’/homepage’><img src=‘funky_logo.jpg’ /></a>”)

NaturalMineralWater's avatar

First thing to do is get a greek translator.. then… oh.. @phoenyx gotz it.

derektherock42's avatar

I’m trying to use @phoenyx‘s answer, but it isn’t working so far. No logo appears when I try to insert the <a href>.

phoenyx's avatar

Here’s an answer more specific to your code. Change your document.write line to this:

document.write(’<a href=”/”><img src=”’+altLogos[whichImage]+’” /></a>’);

phoenyx's avatar

@NaturalMineralWater it’s all greek to you, eh?

derektherock42's avatar

It’s still not working. Pretty baffling to me, since the code you provided makes sense.

jrpowell's avatar

Or you could use a server side language to do it. That way they will still rotate if Javascript is disabled. Here is how I would do it in PHP/

<a href=”/”><img src=”/images/random/<?php $random = rand(1,4); echo $random; ?>.png” alt=“header” /></a>

Assuming the images are named 1.png and so on.

phoenyx's avatar

Are you copying and pasting straight from my example? Fluther pretties up the single and double quotes to look nice, but they won’t work in code. You’ll need to change them back.

Muertoz's avatar

Maybe this works… but it’s the same thing that @phoenyx answered

function showImage()
{
document.write(’<a href=“index.html”>’);
document.write(’<img src=”’+altLogos[whichImage]+’”/>’);
document.write(’</a>’);
}

derektherock42's avatar

@phoenyx Bingo! Problem solved. Thanks!

andrewmgsutton's avatar

@pheonyx – I gotta say you’re right on the money!

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther