Closed Thread Icon

Topic awaiting preservation: Fade random images (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=8227" title="Pages that link to Topic awaiting preservation: Fade random images (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Fade random images <span class="small">(Page 1 of 1)</span>\
 
Rane
Bipolar (III) Inmate

From: Denmark
Insane since: Oct 2001

 posted posted 07-02-2002 09:32

Morning

I was wondering if any of you know of a script that can do the following:

1. specify 10 images
2. show a permanent "image1" on the site onload
3. when you click on a button it will fade "image1" into a random image (of the remaining 9)
4. on each buttonclick it will fade/display the remaining images until all 10 have been showed - then if the user clicks again, it will fade into "image1" and start all over again

Dynamicdrive.com has a script that fades images, but it does it automatically + its not random.

Can anyone help?

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

 posted posted 07-02-2002 13:59

Scripts with requirements as specific as yours aren't very likely to be found "somewhere on the web" . I guess most of the forum members could write such a script, but the problem is you probably ain't gonna learn anything that way. And I think that's what forums like this are about. So how about learning javascript and build it yourself?

I ain't as evil as I might sound, really, so of course I can give you some guidelines:

You want the names of the images to be stored in memory, simplest way to achieve this would be to use an array, like this: var imgList = new Array('img1.gif', 'img2.jpg');

But you also want to know which images have already been shown, so I smell the need for another array, containing as much booleans as the first array has got images: var loadedList = new Array(false, false);
Booleans are like a switch, really, if an image has been loaded, you can turn the corresponding boolean on.

Changing the src of an image itself is the simplest part, but it kinda depends on what browsers you want to support. But what it all comes down to is to give your image a name or id, and make use of that id to change the scr-property.

And for that blending effect, just look at the script you've downloaded and you'll see. If you've come this far, you'll be able to understand it.

Have phun!
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 07-02-2002 15:24

In addition to what Nevel said, you may wish to have an array of Image objects rather than just strings containing image sources, since Image objects will cause the images to be preloaded.

For example:
allimages = new Array();
numimages = 10;
for (a=0; a < numimages; a++)
&nbsp;&nbsp;&nbsp;allimages[a] = new Image();
allimages[0].src = 'myimage1.jpg';
allimages[1].src = 'myimage2.jpg';
...
Rane
Bipolar (III) Inmate

From: Denmark
Insane since: Oct 2001

 posted posted 07-03-2002 14:53

Problem fixed.

It really only required a couple of lines editing in the original dynamicdrive script Its not random though, but i can live with this.

Thanks for the tips

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 posted posted 07-03-2002 17:53

if you have an array of images you are using then

ImageArray[Math.floor(Math.random() * ImageArray.length)]

Should return a random image



.:[ Never resist a perfect moment ]:.
Rane
Bipolar (III) Inmate

From: Denmark
Insane since: Oct 2001

 posted posted 07-04-2002 08:53

Unfortunately it doesnt use an array like that but instead using:

var image1=new Image()
image1.src="firstimage.gif"
...
(http://www.dynamicdrive.com/dynamicindex14/image4.htm)

A bit more tricky to add a random effect there, i'd imagine?

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

 posted posted 07-04-2002 13:42

Well, it's just a question of combining then, no? This approach should work:

var ImageArray = new Array('img1.gif', 'img2.gif', 'img3.gif');

var image1=new Image();
image1.src = ImageArray[0];

var image2=new Image();
image2.src = ImageArray[1];

var image3=new Image();
image3.src = ImageArray[2];

function getRandomImg(){
return ImageArray[Math.floor(Math.random() * ImageArray.length)]
}
Rane
Bipolar (III) Inmate

From: Denmark
Insane since: Oct 2001

 posted posted 07-08-2002 09:11

Thanks

I made the random imagechange work fine - but.....

As its "very" random, it might show the same image right after clicking once and 2 clicks later...the same image again (even it theres a total amount of 10 images) - is it extremely tricky/hard/difficult to make it so it remembers which image has been processed - and then after each image has been "tagged" it starts all over ?

Nevel
Bipolar (III) Inmate

From: Amsterdam
Insane since: Jun 2002

 posted posted 07-08-2002 13:49

Well,

It ain't that tricky, but you haven't written much yourself, now have you? Anywayz, here goes:

<html><head>
<script type="text/JavaScript">
var ImageArray = new Array('img1.jpg', 'img2.jpg', 'img3.jpg'); /* array containing the image paths*/
var usedImages = new Array(); /* create a new array to remember the state of each image */

var image1=new Image();
image1.src = ImageArray[0];

var image2=new Image();
image2.src = ImageArray[1];

var image3=new Image();
image3.src = ImageArray[2];

function startAllOver(){
for(var i = 0; i < ImageArray.length; i++) /* no images have been used yet, so set every value in the array to false */
usedImages[i] = false;
}

function isUsed(nr){ /* function to determine if a certain image has been used or not */
return usedImages[nr];
}

function setNewImg(){
var newImgNr = Math.floor(Math.random() * ImageArray.length);

if(isUsed(newImgNr)) setNewImg(); /* the image has already been used, so pick another number */
else{
usedImages[newImgNr] = true; /* image has been used, so set it's usedImaged-value to true*/
document.getElementById('dynImg').src = ImageArray[newImgNr]; /* get the corresponding img-path and change the img src */
}
}

function fullHouseCheck(){ /* check whether all images have been used. if so, set them all to false in order to start over*/
var allUsed = true; /* are all images used yet? */
for(var x = 0; x < usedImages.length; x++){
if(isUsed(x) == false) allUsed = false;
}

if(allUsed){
startAllOver();
}
}

function comeAgain(){
setNewImg();
fullHouseCheck();
}
</script>
</head>
<body onload="startAllOver();comeAgain();">
<img id="dynImg"><br>
<a href="javascript:comeAgain();">Next image</a>
</body></html>

« Backwards — Onwards »

Show Forum Drop Down Menu