Random pics with hyperlink not working

JavaScript
1

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!

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

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.

3

Hi
this line in your loop:


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

will result in this output:


<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


<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


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

FULL CODE EXAMPLE:


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