Random pics with hyperlink not working

Hello.

I'm not sure why it is not loading my pics with the hyperlink. Any help to identify the problem will be appreciated. Thank you for your help!

Code:

---

<title>Random Images</title>
<style type="text/css"><!--
body {

}
img#random {
width:664px;
height:240px;
border:0;
}

/*//]]>*/
--></style>
<script type="text/javascript">// <![CDATA[
var images=new Array();
images[0]=<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>;
images[1]=<a href="http://albuquerquenm.oneclickdigital.com/Home/Newly%20Added.asp"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/one.click.png" alt="One Click"></a>;
images[2]=<a href="http://0-site.ebrary.com.albuq.cabq.gov/lib/abqpl/home.action"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/ebrary.png" alt="ebrary"></a>;
images[3]=<a href="http://abcreads.blogspot.com/"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/abcreds.png" alt="abcreads"></a>;

function randomImage() {
var i=Math.floor(Math.random()*images.length);
document.getElementById("random").src=images[i];

}
onload=randomImage;
// ]]></script>
<div id="container"><img id="random" alt="" /></div>

---

I can't really check your code well because I'm on my iPod, but in your function randomImage, why not make the image a div and use the image as a BG and change it using document.getElementById('id').style.backgroundImage = CSS property.

Hi
this line in your loop:

Code:

---

document.getElementById("random").src=images[i];

---

will result in this output:

Code:

---

<img id="random" alt="" src="<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>" />

---

because that is what you are telling it to do!

You will also need some single quotes around the Array values

Code:

---

<script type="text/javascript">// <=!=[=C=D=A=T=A=[
var images=new Array();
images[0]='<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>';
images[1]='<a href="http://albuquerquenm.oneclickdigital.com/Home/Newly%20Added.asp"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/one.click.png" alt="One Click"></a>';
images[2]='<a href="http://0-site.ebrary.com.albuq.cabq.gov/lib/abqpl/home.action"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/ebrary.png" alt="ebrary"></a>';
images[3]='<a href="http://abcreads.blogspot.com/"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/abcreds.png" alt="abcreads"></a>';

---

Then you could use innerHTML to put the image into the container div

Code:

---

<div id="container"></div>

---

FULL CODE EXAMPLE:

Code:

---

<script type="text/javascript">// <=!=[=C=D=A=T=A=[
var images=new Array();
images[0]='<a href="http://www.consumerreports.org/cro/index.htm"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/consumerreports.png" alt="Consumer Reports"></a>';
images[1]='<a href="http://albuquerquenm.oneclickdigital.com/Home/Newly%20Added.asp"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/one.click.png" alt="One Click"></a>';
images[2]='<a href="http://0-site.ebrary.com.albuq.cabq.gov/lib/abqpl/home.action"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/ebrary.png" alt="ebrary"></a>';
images[3]='<a href="http://abcreads.blogspot.com/"><img src="http://lgimages.s3.amazonaws.com/data/imagemanager/33414/abcreds.png" alt="abcreads"></a>';

function randomImage() {
var i=Math.floor(Math.random()*images.length);
document.getElementById("container").innerHTML=images[i];

}
onload=randomImage;
// ]=]=></script>
<div id="container"></div>

---