Animated gifs on a website :)

hi all, i've made an animated gif of subarus in xtreme to add to the index page of my website.
The idea i was hoping to get, was the cars would be random whenever anyone looked at the site but it always starts from the first cars (frame) and each set of cars is displayed after that at the time frame i've set

is there anyway to get it so instead of the first frame always showing, it might happen to come in on the third frame or any other frame ..........as if the animated gif was working all the time and it just depended on when the site come up on your browser as to what frame it fell on. hope that makes sense :) http://i47.photobucket.com/albums/f1...acing/ets1.gif
http://i47.photobucket.com/albums/f1...acing/ets2.gif
http://i47.photobucket.com/albums/f1...acing/ets3.gif

:)

An animated gif file will always start with the 1st frame so it will always look the same.
You probably need to find a java script or applet that will display random images.

I don't know of a way to get a single animated gif start on a random frame.

I do know that you can use javascript and using multiple animated gif files you can randomly select a file to start and randomly select another one to begin when the first and subsequent files end.

I don't have any sample code for that at this time.

A search on google will probably return several results about how to do that.

EDIT: Looks like Bruce where there with good advice before I was :)

Holy mother of Kazan, how big are those gifs??? :eek:

I just checked. 253Kb... a little large for an index page opening graphic, don't you think? :rolleyes:

:) thanks guys, i don't have the first clue about java script so i'll have to leave it as is for now :)


is it too big for you big frank? :D

These are the days of our lives...

If the gif files are as big as Frank said then that is too big. Most people will never hang around long enough to see the 2nd frame.

Here is a link to a java script. If you need help you can email me here.
http://javascript.internet.com/misce...e-rotator.html

Quote:

---

Originally Posted by Big Frank

Holy mother of Kazan, how big are those gifs??? :eek:

I just checked. 253Kb... a little large for an index page opening graphic, don't you think? :rolleyes:

---

i hadn't really considered it until you said :rolleyes: ;) i haven't got the fastest broadband connection but the page loads within a few seconds :)

your pelican jpeg is 212kb so i'd thought for an animated gif the size 252kb was ok but i take your point and i'm now trying it again :)

:) :) Thanks very much A4Hire, i really appreciate the link and the offer of help if needed :) :) :)

How are you coming up with 253? I rightclick on the images and properties tells me a figure totally different.

You can use flash and start it with a different frame, or you can just make random frames appear each time you enter your website.
Try the Kirupa tutorials

Quote:

---

Originally Posted by -=Drifter=-

How are you coming up with 253? I rightclick on the images and properties tells me a figure totally different.

---

I went to his website and right-clicked on his animation:

Quote:

---

Originally Posted by suunto

i hadn't really considered it until you said :rolleyes: ;) i haven't got the fastest broadband connection but the page loads within a few seconds :)

your pelican jpeg is 212kb so i'd thought for an animated gif the size 252kb was ok but i take your point and i'm now trying it again :)

---

I think it's taken for granted that on this site we will be faced with large graphics - it is after all a graphics website and I did apologise for the rather large size. Your customers, on the other hand, are on a performance car parts website and anyway with an animation that large they will not see the various slides of the animatyion because by the time they load they'll have moved off to another page. Remember, users do not linger the way you do on your own site.

Until last week for the past 4 years all I had was 128kbs ISDN. I am therefore fairly bandwidth-aware. I now have 512kbs ADSL. Party time! :p

As Availor say's Flash can do this fairly easily. You can view a demo HERE

If you hit the Refresh button it should start with a random image each time. The sequence of display is also random. The swf loads one of 7 jpg's (each about 16Kbs each so it should only take 4 seconds per jpg to load on a 56 Kb dial-up connection)

On BF's point, your animated gif size of 252Kb is a bit large, but if I remember correctly gif files download and display sequentially, so each gif in your file is (252/7 = 36Kb) so as soon as that first 36Kb gif is loaded it displays. (8 seconds on a 56 Kb dial-up connection). However that said it still has to load all the other images etc on your page whilst it still chugs away at downloading this 252Kb gif file. Finally the animated gif route has the BIG disadvantage of only being able to use gifs thus restricted to 256 colours and for photographs not as small as jpg's.

Quote:

---

Originally Posted by Availor

You can use flash and start it with a different frame, or you can just make random frames appear each time you enter your website.
Try the Kirupa tutorials

---

Thanks very much, looks cool :) :)

Quote:

---

I think it's taken for granted that on this site we will be faced with large graphics - it is after all a graphics website and I did apologise for the rather large size. Your customers, on the other hand, are on a performance car parts website and anyway with an animation that large they will not see the various slides of the animatyion because by the time they load they'll have moved off to another page. Remember, users do not linger the way you do on your own site.

Until last week for the past 4 years all I had was 128kbs ISDN. I am therefore fairly bandwidth-aware. I now have 512kbs ADSL. Party time!

---

Frank, what sort of size should i be aiming at if i stick with an animated gif? i've been reading the links from a4hire and Availor and learning from them so hopefully i'll be able to change it soon <bit trial and error, first no doubt> ;)

is it really large? the whole page (and animation) loads for me in seconds, i've set the time between frames but the whole gif loads quickly, i understand what you saying but my aim was not for them linger to see the various slides but rather have a random image each time someone visits the site :)

Quote:

---

Originally Posted by Egg Bramhill

As Availor say's Flash can do this fairly easily. You can view a demo HERE

If you hit the Refresh button it should start with a random image each time. The sequence of display is also random. The swf loads one of 7 jpg's (each about 16Kbs each so it should only take 4 seconds per jpg to load on a 56 Kb dial-up connection)

On BF's point, your animated gif size of 252Kb is a bit large, but if I remember correctly gif files download and display sequentially, so each gif in your file is (252/7 = 36Kb) so as soon as that first 36Kb gif is loaded it displays. (8 seconds on a 56 Kb dial-up connection). However that said it still has to load all the other images etc on your page whilst it still chugs away at downloading this 252Kb gif file. Finally the animated gif route has the BIG disadvantage of only being able to use gifs thus restricted to 256 colours and for photographs not as small as jpg's.

---

thanks Egg, i really am learning as i go, so i appreciate all the help i've been given in this thread and also on this site :) :) :) :)

Suunto,

Quote:

---

the whole page (and animation) loads for me in seconds

---

Yes it will. You've viewd your page numerous times. When you view a web page all the images etc are held in your computer cache (temporary internet files), so the second time you view it it doesn't download from the web server but loads from your computers cache, so it will appear to load in a second as it doesn't have to fetch everything from the web server the second time.

One way of calculating how quickly your page will download is to add the file size of every image on the page (plus any background image). Say this comes to 400Kb's. Now to calculate how long this page takes for a visitor on a 56kb dial-up connection devide 400Kb by 4 = 100. So your site will take approx 100 seconds to download in full. Far to long. You cannot ignore dial up visitors.

Quote:

---

Originally Posted by Egg Bramhill

Suunto,

Yes it will. You've viewd your page numerous times. When you view a web page all the images etc are held in your computer cache (temporary internet files), so the second time you view it it doesn't download from the web server but loads from your computers cache, so it will appear to load in a second as it doesn't have to fetch everything from the web server the second time.

One way of calculating how quickly your page will download is to add the file size of every image on the page (plus any background image). Say this comes to 400Kb's. Now to calculate how long this page takes for a visitor on a 56kb dial-up connection devide 400Kb by 4 = 100. So your site will take approx 100 seconds to download in full. Far to long. You cannot ignore dial up visitors.

---

Thanks Egg,
your right, i can't ignore dial up visitors, i really didn't realise it was too big, when Big Frank said it was too big, i went into internet options and deleted the temporary internet files and tried it again. it was still quick so i will change it but at the end of the day my aim was for it display a random image each time so i will give the java a go, thanks again :) :) :)

Your file size is almost just an aside. I think the conclusion of this thread is that you are certainly using the wrong tool for the job. If you want to display a random image every time somebody loads your home page an animated gif is not the tool for the job. I would use PHP, Javascript or, as a last resort, Flash, but never GIF.

Suunto, do you want the images to rotate once on the page? Or are you happy with each time somone visits they get a random image?

Quote:

---

Originally Posted by AntonyF

Suunto, do you want the images to rotate once on the page? Or are you happy with each time somone visits they get a random image?

---

Hi AntonyF, my aim was to get a random image display, each time someone visits my site :) :)

Quote:

---

Originally Posted by suunto

Hi AntonyF, my aim was to get a random image display, each time someone visits my site :) :)

---

Then script it with PHP or Javascript or Actionscript or something. That way the only thing that has to load is the script (very small) and one of the random images.

[QUOTE=Big Frank;177011]Then script it with PHP or Javascript or Actionscript or something.QUOTE]
Thanks for the advice Frank but i don't know how to do that.............................................. ..............yet :confused:
:)

You don't need to know. There are loads of tutorials on the web on how to do it using, for starters, Javascript. Here's one I found within 2 seconds of a Google search:

http://www.javascript-page.com/ranimage.html

Quote:

---

Originally Posted by suunto

Hi AntonyF, my aim was to get a random image display, each time someone visits my site :) :)

---

Ahh, much easier then.

If you can use PHP, you can just use this code:

HTML Code:

---

<?php
srand ((double) microtime( )*1000000);
$photo = rand(0,10);
echo "<img src=\"http://www.website.com/images/$photo.jpg\">";
?>

---

Then if you have 10 images named 1.jpg through 10.jpg it will pick them randomly. Just change your the URL to match where your images are located. and if you have less than 10 images, change the 10 to 8 or whatever.

Quote:

---

Originally Posted by Big Frank

You don't need to know. There are loads of tutorials on the web on how to do it using, for starters, Javascript. Here's one I found within 2 seconds of a Google search:

http://www.javascript-page.com/ranimage.html

---

thanks frank, i've found stuff like that too but i really don't know what to do with it:confused: i liked the link by A4Hire because it had steps as to what to do and at the stage i'm at i pretty much need it spelled out :D

Thanks Antony, what do you mean, change the url to match where the images are located :confused: do i just copy and paste that code into the page?

Thanks for all your help guys :) :)

Quote:

---

Originally Posted by suunto

Thanks Antony, what do you mean, change the url to match where the images are located :confused: do i just copy and paste that code into the page?

Thanks for all your help guys :) :)

---

You paste it directly into your page where you want the image to appear, and you change http://www.website.com/images/ to the location of your image.

BUT... the page itself needs to be named whatever.php, and that relies on PHP being enabled on your website.

If u dont want the Page need to be reloaded every time to show a random Picture better go with Javascript. This simulate the behaivor from animated gif.

It works in a very similar manner. I have such a Script few years ago, if u like i can find and post it here for you.

Whatever you use, dont use gif images - they are a good choice for low detail/less color images like cartoons, jpeg is optimize for Pictures.

Quote:

---

Originally Posted by Big Frank

You don't need to know. There are loads of tutorials on the web on how to do it using, for starters, Javascript. Here's one I found within 2 seconds of a Google search:

http://www.javascript-page.com/ranimage.html

---

Frank i tried the link and this is what happened :confused: just get a red X :(

i also get the same with A4hires link, so at least i'm consistant :D

Egg, once you had the pictures of the cars, what did you do then, did you use a programme? i've got macromedia flash8 but (as you can no doubt tell) never used it.
how do you then put it in to the webpages? :confused: :) :)

http://i47.photobucket.com/albums/f1...cing/front.gif

http://i47.photobucket.com/albums/f1...ing/front1.gif

ps, yes magicmesh, i'll give it a go, can you post it please :)

Remove the

Code:

---

F:\

---

from the image URLs. I am assuming the images are in the same directory (folder) as the page that contains your script.

thanks for your video lessons. i was really interested in your video lessons but every thing was in a different language actually Arabic of which i didn't even know where to log on
could you pls help me or give me a simple way to log on

Quote:

---

Originally Posted by Big Frank

Remove the

Code:

---

F:\

---

from the image URLs. I am assuming the images are in the same directory (folder) as the page that contains your script.

---

Thank you very much Frank, i didn't have the images in the correct folder :) and thanks for all the help guys, i got there in the end :) :) :) :D

It's been a pleasure helping you - knew you'd get there in the end.
:p

Suunto,

I attach the fla file I used to create the animation. Place the swf file where your current gif file is. You'll also need to include the jpg files in the same directory as the swf file.

Quote:

---

Originally Posted by nchurene

thanks for your video lessons. i was really interested in your video lessons but every thing was in a different language actually Arabic of which i didn't even know where to log on
could you pls help me or give me a simple way to log on

---

Hmmm since I don't see any Arabic-like video lessons in these post I presume you mean me (?)

I just used my host to upload my college site there. It's Hebrew actualy and it has nothing to do with video tutorials. I forgot to remove my link until I actually upload the relevant site, which is going to be in english don't worry.

Quote:

---

Originally Posted by suunto

ps, yes magicmesh, i'll give it a go, can you post it please :)

---

I did not found the Script but i'll create it from scratch :)

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Random Image</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <script type="text/javascript" language="JavaScript">
        /*<![CDATA[*/
        function startShow() {
                // Define Globals Vars
                myImage = document.getElementById('randomImage')
                changeInterval = setInterval('randomImage()', 2000);
        }
        function randomImage() {
                var randomNum = (Math.round((Math.random()*7)+1))
                myImage.src = 'img/pict'+randomNum+'.jpg'
        }
        /*]]>*/
        </script>
</head>

<body onload="startShow()">
        <img id="randomImage" src="img/pict1.jpg" alt="The Random Image" />
</body>

</html>

---

You can preview it here or Download the tarball with images.

Here is another (more complex) Script i'll made in the past. It's a slide Show and doesnt show Random Images but maybe its intresting for someone too.
http://tmp1.dotmagic.de/js/slides2/

If found THIS it can be useful for you.

thanks you guys :) :) :)
magicmesh, i'm totally mpressed that you couldn't find it but started from scratch, don't have a clue how you understand that but thanks :D