1.

Solve : Help with Javascript code!?

Answer»

Well, first of all I noticed a tag problem. You somehow have two "" tags. Your other problem is my fault. The size of the images array should be two, not three. Your current example only has two sets of images and links, but the array is sized at three.Ok, so how do I fix the tag problem? Please give me the exact code how it should appear in my page. Also, how do I make it appear in the green box? Here is the correct code. Of course, you'll have to update the links and images to yours to make it work. Try this code on that test page you used before. If this works I'll tell you how to add the image to the green box.

Code: [Select]<HTML>
<head>
<script type="text/javascript">
function random()
{
//The 2 below can be changed to what ever you want
//depending on the number of images/links you have.
VAR images = new Array(2);
images[0] = new Array(2);
images[0][0] = "image0.jpg";
images[0][1] = "page0.html";
images[1] = new Array(2);
images[1][0] = "IMAGE1.jpg";
images[1][1] = "page1.html";
images[2] = new Array(2);
images[2][0] = "image2.jpg";
images[2][1] = "page2.html";

var index = Math.floor(Math.random() * images.length);

document.getElementById("randomImage").src = images[index][0];
document.getElementById("randomLink").href = images[index][1];
}
</script>
</head>

<body onload="random()">
<a id="randomLink" href=""><img id="randomImage" src="" alt="Random Image" /></a>
</body>
</html>
It does work:

http://www.stringsdepotplus.com/news_01.html

So if you can guide me how to make this work on my homepage that will be great. Also, if possbible how to add the alt text for each image seperately. Place this code between the head tags.

Code: [Select]<script type="text/javascript">
function random()
{
//The 2 below can be changed to what ever you want
//depending on the number of images/links you have.
var images = new Array(2);
images[0] = new Array(2);
images[0][0] = "image0.jpg";
images[0][1] = "page0.html";
images[1] = new Array(2);
images[1][0] = "image1.jpg";
images[1][1] = "page1.html";
images[2] = new Array(2);
images[2][0] = "image2.jpg";
images[2][1] = "page2.html";

var index = Math.floor(Math.random() * images.length);

document.getElementById("randomImage").src = images[index][0];
document.getElementById("randomLink").href = images[index][1];
}
</script>

Add the function call to your body tag.

Code: [Select]<body onload="random()">

And finally, add this code to wherever your green box is.

Code: [Select]<a id="randomLink" href=""><img id="randomImage" src="" alt="Random Image" /></a>
It works!! Here you can see:

http://www.stringsdepotplus.com/index.php


A few questions:

a) How can I add the alt text to each individual image?
b) If I want to add another image to the alternating group, what code do I need to edit?

Thanks!!Quote

a) How can I add the alt text to each individual image?

To add the alt text to each image you can increase the size of the individual arrays inside the main image array to 3. The increased size will give you a place to place the text. You will then have to access the alt attribute of the image tag.

Quote
b) If I want to add another image to the alternating group, what code do I need to edit?

If you want to add another image to the array you must increase the size of the image array.

Code: [Select]<script type="text/javascript">
function random()
{
//The 3 below can be changed to what ever you want
//depending on the number of images/links you have.
var images = new Array(3);

//First image
images[0] = new Array(3);
images[0][0] = "image0.jpg";
images[0][1] = "page0.html";
images[0][2] = "image0";

//Second image
images[1] = new Array(3);
images[1][0] = "image1.jpg";
images[1][1] = "page1.html";
images[1][2] = "image1";

//Third image
images[2] = new Array(3);
images[2][0] = "image2.jpg";
images[2][1] = "page2.html";
images[2][2] = "image2";

var index = Math.floor(Math.random() * images.length);

document.getElementById("randomImage").src = images[index][0];
document.getElementById("randomLink").href = images[index][1];
document.getElementById("randomImage").alt = images[index][2];
}
</script>
It works. Thanks for all the help. No problem. Thats why were here. If you need more help with this or with other Javascript related issues I will be glad to help. I am also pretty GOOD at CSS so if you need help with that I can assist you as well.


Discussion

No Comment Found

Related InterviewSolutions