Random Image Script

[mschris]

I'm new to the site and would like to say hello to everyone that views this thread.

My question:
I received the notice of the available script "Random Image Script" I've tried running it in frontpage and it doesn't seem to work. I right clicked on the images and saved them also, as I thought this was the problem. Didn't work. What is suppose to be the picture var setup for this file.

theImages[0] = '100.jpg' (the code shows this)
var theImages[0] = "100.jpg"; (I tried this also)

Neither way works. Many thanks.

[fredmv]

Welcome to the forums.

Could you perhaps provide the full script you're working with?

[steelersfan88]

normally, a radnom image script is like:var pics = new Array
pics[0] = "myPic1.src"
pics[1] = "myPic2.src"
pics[2] = "myPic3.src"
pics[3] = "myPic4.src"
pics[4] = "myPic5.src"

var theImg = pics[Math.floor(Math.random()*pics.length)]
document.getElementById('rndmImg').src = theImgI would assume this is what you are working with?

[fredmv]

Generally a random image script would follow that kind of similar structure, however, it would help to see exactly what the original poster is working with so we can provide more accurate suggestions.

[mschris]

I apologize, I thought that by copying and pasting the name would take you to the link. The script is located here

http://javascript.internet.com/bgeffects/random-image-script.html

[fredmv]

OK, lose your current script and use something like this:<script type="text/javascript">
//<![CDATA[
var imgs =
[
'img1.png',
'img2.png',
'img3.png',
'img4.png',
'img5.png'
];

document.writeln('<img src="' + imgs[Math.floor(Math.random()*imgs.length)] + '" alt="" />');
//]]>
</script>Simply change the image locations in the array to whatever you'd like.

[steelersfan88]

use fred's code ... its like twenty thousand lines shorter and easier to edit, but if you MUST keep this script, leave it as it is in the code you got from the source you provided .... just change the 100.jpg - 500.jpg to your own pictures, it should look like this:theImages[0] = "picture here"
theImages[1] = "picture here"
theImages[2] = "picture here"
theImages[3] = "picture here"
theImages[4] = "picture here"
theImages[5] = "picture here"
theImages[6] = "picture here"
theImages[7] = "picture here"
theImages[8] = "picture here"
theImages[9] = "picture here"
theImages[10] = "picture here"
theImages[11] = "picture here"You just put i nas many pictures as you need. To increase the frequency of one picture, add it more than 1 time!

[mschris]

I would love to use Fred's shorter code but I don't understand how to edit it. I copied it and pasted it into my frontpage and when I went to view I saw what I pasted in html. This is what I changed it to.

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
var imgs =
[
'100.jpg',
'200.jpg',
'300.jpg',
'400.jpg',
'500.jpg'
];

document.writeln('&lt;img src="' + imgs[Math.floor(Math.random()*imgs.length)] + '" alt="" /&gt;');
//]]&gt;
&lt;/script&gt;


I saved the images from the original source as the same names because I thought that was the problem so I do have the images in my image folder as those names.

With the code steelersfan88 suggested do I just put the name of the image where you have "picture here" at. Is there to be any punctuation at the end. Freds code seems better than what I downloaded but I can't get either to work. Thanks

[fredmv]

FrontPage seems to have converted all literal characters to their equivalent entities. This is the reason for it not working. I would suggest copying the source code from here and then opening it in a decent source editor (e.g., GNU Emacs, KWrite/Kate, HTML-Kit) or basic text editor (e.g., Notepad) so that it won't mess with your source code like FrontPage has done.

[Vladdy]

Rule #1 of modern client side scripting is: "Whenever possible scripting should enhance content and/or presentation not provide it"

Therefore some image should be present for those without javascript (or with javascript that does not have adequate functionality). If the image is part of your content then it would be included in your document using <img> element:

<img id="randomImage" src="defaultImage.png" alt="Alternative Text" />

If the image is part of presentation, it should be placed as a background of an element it relates to:

<div id="randomBG" style="background-image: url(defaultImage.png)"> Some content</div>

Once the page is loaded and if javascript is available you can change either image or background using the body onload event:
<body onload="changePicture()">

The script placed within the document head would look like this:
<script>
randomImages = new Array("image1.png","image2.png");

function changePicture()
{ pictureIndex = Math.floor(Math.random()*randomImages.length);
//If image is content:
document.getElementById('randomImage').src = randomImages[pictureIndex];
//If image is presentation
document.getElementById('randomBG').style.backgroundImage = "url('" + randomImages[pictureIndex] + "')";
}

</script>

[fredmv]

Thanks for the correction; couldn't agree more. Guess I provided that solution a little too fast&hellip; ;)

[mschris]

Please don't go away. I have to go to class now but I think i'm finally getting it. Please meet me at the same place and same time monday. I appreciate all the help. I will play with the newest code later this evening.

[mschris]

I'm back. If anyone is out there to start this challenge up again i'm ready.

Tried copying as vladdy has it, then I changed the text to my own. It looks like this

<script>
randomImages = new Array("img1.jpg","img2.jpg");

function changePicture()
{ pictureIndex = Math.floor(Math.random()*randomImages.length);
//If image is content:
document.getElementById('randomImage').src = randomImages=images;
}


still doesn't work. Did I change the text in the right places or what went wrong.

[Vladdy]

To begin with, you did not do a good job copying:

function changePicture()
{ pictureIndex = Math.floor(Math.random()*randomImages.length);
//If image is content:
document.getElementById('randomImage').src = randomImages[pictureIndex];
}

Also, since the code interacts with the HTML document, seeing the HTML markup is as important in debugging the script.

[mschris]

OOOOOOHHHHH Geese I'm so sorry I am laughing so hard. I thought I followed instructions. Well I guess I didn't. Forgive me I really am trying. Before I asked for help again I tried a million different things.

Was I not suppose to change any of the stuff you put in. I thougt I was to change where it says Picture Index. Is that where my location of the files go? And next is, seeing the HTML, by me coping and pasting that's not allowing you to see it. If not what do I need to do to allow you to see it. Is there a way I can link to this site?

[mschris]

Is someone out there to give me some assistance on this one?

[Paul Jr]

Can we get a link to the site so we can see the Mark-up and JavaScript?

[Tage]

randomImages = new Array("img1.jpg","img2.jpg");

That is called an array. You have two indexes in this array so far. These two indexes, "img1.jpg" and "img2.jpg", are the locations of your images. To add more, just separate it with a comma. Like this

randomImages = new Array("img1.jpg","img2.jpg","img3.jpg");

Now there are three indexes in this array.

randomImages[pictureIndex];
The pictureIndex is the number of the index you want to get. In javascript, numbers count from 0 and up, not 1. So the number of the first index "img1.jpg" is 0. If you want randomImages[pictureIndex] to be the first index you would replace it with
randomImages[0];

Tage