Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Randomly changing Images 1

Status
Not open for further replies.
joecdn

joecdn

Programmer
Oct 28, 2003
47
0
0
CA
I know there's a way to do this, but I can't seem to find the coding. What I want is to have images randomly change every set time while being on a page. How do I do this? Also, to add to it, is there a way you can have each image fade in and fade out when you're changing from one picture to another? Any insight would be great.

Thanks in advance
 
Sort by date Sort by votes
sorry I can't help with the fading...


<script>
imgArr = new Array(&quot;pic1.jpg&quot;,&quot;pic2.jpg&quot;,&quot;pic3.jpg&quot;,&quot;pic4.jpg&quot;)

function switchImg(){
document.myImg.src = Math.floor(Math.random() * imgArr.length)
setTimeout(&quot;switchImg()&quot;, 3000)
}
<body onLoad=&quot;switchImg()&quot;>

<img name=&quot;myImg&quot; src=&quot;blankPic.jpg&quot;>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Alternatively if you really want it to fade, you could just create an animated gif file and reduce the opacity in the image from frame to frame. This really only works with small pictures of mediocre quality. Animated gif files can get pretty big, but it would serve your purpose.

-kaht

banghead.gif
 
Upvote 0 Downvote
Thanks for the code, but can you explain it a little. It's not really making sense to me. I actually have 10 images that I want to use called image1.jpg, image2.jpg ... image10.jpg. Is there an easier way to code it without listing every image name? Like maybe a for loop or something?

Also, what does this line mean? document.myImg.src = Math.floor(Math.random() * imgArr.length)

Do I need to load these images in the body tag?

Sorry, to ask so many dumb questions, but I'm not too familiar with the Javascript syntax.

Thanks
 
Upvote 0 Downvote
You can use a loop to load the images if you'd like...

<script>
imgArr = new Array()
for (x=1; x<=10; x++){
imgArr[x-1] = &quot;image&quot; + x &quot;.jpg&quot;
}
function switchImg(){
document.myImg.src = imgArr[Math.floor(Math.random() * imgArr.length)]
setTimeout(&quot;switchImg()&quot;, 3000)
}
</script>
<body onLoad=&quot;switchImg()&quot;>


This line had an error... sorry....
document.myImg.src = imgArr[Math.floor(Math.random() * imgArr.length)]

is saying the the source of the image named &quot;myImg&quot; in my document should have a source equal to the randomly picked image from the array.


Do I need to load these images in the body tag?
they load themselves when the code is read (before the onLoad event that fires the function)...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
OK, I'm getting closer, but now I'm getting this error: 'document.myimg is null or not an object'

Here's the line of code: 'document.myImg.src = imgarr[Math.floor(Math.random() * imgarr.length)]'

Man, this is quite the ordeal. I'm actually doing this within the body, could that make a difference?
 
Upvote 0 Downvote
Shouldn't make a difference.

The main thing is to make sure you have an image with the proper name....

<img name=&quot;myImg&quot; src=&quot;blankPic.jpg&quot;>


JavaScript is case sensitive. So &quot;myimg&quot; != &quot;myImg&quot; anf &quot;imgarr&quot; != &quot;imgArr&quot; - make sure you have the correct image name...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
OK, getting even closer and I'm definitely learning from this ... so don't give up on me ... BUT!!! Now, it will run with no errors, but the images won't change. So, I'm thinking there's something in the function itself. Here's what I have.

imgarr = new Array()
for (var x=1;x<=10;x++){
imgarr[x-1] = 'images/image' + x +'.jpg'
}

function switchImg(){
document.myimg.src = imgarr[Math.floor(Math.random() * imgarr.length)]
setTimeout(&quot;switchImg()&quot;, 3000)
}

By the way, you were right with the case sensitive, There was 1 that was different.
 
Upvote 0 Downvote
You need to check to make sure the image names that you loaded into the array are correct. Are you calling the function &quot;switchImg()&quot; with an onLoad event handler in the BODY tag? Make sure the function is called.


Add this just for error checking to make sure the array holds what you want it to....

<body onLoad=&quot;switchImg(); alert(imgArr)&quot;>

Also, in the function add this for debugging....

function switchImg(){
imgNum = Math.floor(Math.random() * imgarr.length)
document.myimg.src = imgarr

setTimeout(&quot;switchImg()&quot;, 3000)
window.status = imgNum
}



Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)
 
Upvote 0 Downvote
Aha ... I figured out the problem. It was because I was already using an OnLoad, but I don't know why, so I took it out and everything seems to be working fine. Thanks you so much for your help.
 
Upvote 0 Downvote
yw

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
Alternate images not working
Replies
2
Views
40
lupidol
lupidol
ahm1985
  • Locked
  • Question
get the value of row before changing in table if cancel click
Replies
0
Views
32
ahm1985
ahm1985
Julierme
  • Locked
  • Question
Selecting leaflet markers and changing marker icons
Replies
0
Views
31
Julierme
Julierme
c0deM0nK424
  • Locked
  • Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
43
c0deM0nK424
c0deM0nK424
Blueie
  • Locked
  • Question
Changing location on screen? 1
Replies
7
Views
84
Blueie
Blueie

Part and Inventory Search

Sponsor

Back
Top