Animated links

[Bigdave151985]

Ok Im creating a website soon and Im just in the designing stage at the moment. I would like the site to have a frame of some sort on the left hand site of the site with all the links in it. What I ideally want is a way to make an animation to play when a link in the frame is pressed. The animation will play and once completed the requested page will then load.

For example:

I click the photo albums link in the frame. The animation will play and the once finished it will stop and open the photo album section of my site in the main area of my site whilst keeping the frame in the left hand of my site.

Hope people understand what I mean.

Thanks

[djr33]

Where would this animation be? Would the link itself be an image that becomes animated? Or would, based on that click, another image begin moving somewhere (above, below, etc.) within that frame?

The answer might be as simple as just doing:
<a href="next.htm" target="myframe" onClick="document.images.myimg.src='animation.gif';">click me</a>

I think that's close to working, assuming the image was named 'myimg'.

[Bigdave151985]

The animation would be at the bottom of the frame where all the links are. I dont want the link itself to become animated.

Think Id better explain exactly what I want to do.

I want a row of links going down on the left of the screen and when clicked I want an animation at the bottom of the frame to say loading with blocks moving left to right as if it was data traveling along a phoneline, a bit like most installation status bars and like what Microsoft use on their update pages. It wont be actually connectioned to how much is loaded it will just play for a very short period of time before opening the link they selected. You understand me or have I made it even worse?

[Bigdave151985]

Sorry to double post but any more ideas?

[djr33]

Have patience. I happened to be online when you posted this, but have since been to math class. The regular posters here are usually on and off all day, so give it at least 24 hours before thinking you won't get a response, and usually 72 or so, since people are busy frequently.

The method above should do exactly what you need. I can't remember if that is the exact right javscript, but I think it's close.

Now, create an animated gif of your status bar, make it the right length and DON'T set it to loop. Set it to only play one time. This will make it display "loading." > "loading..." > "loading....." > "loading.......", then stop at the end, which could either by "loading........", or "loaded", etc, whichever you desire.
Then it will simply be refreshed when a visitor clicks another link above.

Quite simple.


Note: you're probably on the right track not trying to have this relate to the frame loading as that will make things much more complex. You would need a lot more work to get that to connect and you might not even be able to do it, considering that you can't really tell, while it is loading, the speed at which things are being transferred. You could, I suppose, use an onLoad function in the body tag of the framed page to then stop the animation of the image, if it were a loop (such as the hour glass cursor), but this wouldn't be a traditional loading bar, just a spinning/rotating/repeating "loading" pattern, which might work for you too, but seems like more work.


EDIT: Tested, and it does work. Just use <img .... name="myimg"> (use what you would like for myimg, but change in the javascript as well).

You could also define a function if you'd like it to be easier to add to each link--
Head section:

<script type="text/javascript>
function loader() {
     document.images.myimg.src='animation.gif';
     }
</script>

change the bits in italics for your page.

Simply use:
<a ..... onClick="loader();">, and that is all you need for each link.