How do I make a picture in an HTML script a clickable link?
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
document.write(”<a href=’/homepage’><img src=‘funky_logo.jpg’ /></a>”)
First thing to do is get a greek translator.. then… oh.. @phoenyx gotz it.
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>.
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>’);
It’s still not working. Pretty baffling to me, since the code you provided makes sense.
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.
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.
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>’);
}
@pheonyx – I gotta say you’re right on the money!
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.