View Full Version : How do you replace animation with new animation after first has loaded?? anyone.

12-17-2005, 01:24 PM
I am in the process of building a complicated web interface and I have a problem.

If you want to check out the site to better understand it is:

It is going to be an art site for a client. It is the clients design.
I have searched on forums and search engines for months and have not found any help for my problem.

What I need to do is to load a gif anim. and then when that has loaded I need to replace it with another animation file.
Is this possible??

The idea is that the menu will load and automatically spin to reveal arrows that control the window scroll bar.
The client then needs the interactive buttons to pluse and so I need to replace the original anim file with the new one.

I just don't know how to approach this.

The site is bieng constructed with simple technology as it is intended for use with screen readers, voice software and blind touch balls, so I have opted against flash which would solve all my problems.

The site is a little rough at the moment but eventually I will streamline the code and it will be much slicker.

Just hope someone can help....

12-17-2005, 01:25 PM
As well as the pulsing animations I am trying to create a new scroll bar device.

The menu system has a shadow to create a floating over the page illusion.
What I am trying to do is create a shadow using png files of different opacities that will link to the scrollbar position.

The window scrollbar will eventually be hidden and the shadow will be used instead.
The idea is to have darker images linked to the top scrollbar position and as the user scrolls down the page information the shadow will get lighter and lighter.
Probably use 5 images.

I just have not been able to find any help in constructing it.

12-17-2005, 05:03 PM
dont know the complexity of your animations but JavaScript can create annimations normally with far less codesize than the equivelent gif.

as for the scroll bar this can be done with JS generated divs and opacity
can give you examples of above but as a commercial application examples only

Anyway to change an image src


Good practice for site to be functional with Javascript disabled

12-17-2005, 06:02 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<script language="JavaScript" type="text/javascript">
// by Vic Phillips (17-12-2005) http://www.vicsjavascripts.org.uk

var zxcScrollDivs=100;

function zxcFillScrollBar(){
var zxcbdy=document.getElementsByTagName('BODY')[0];
var zxcsb=document.getElementById('zxcScrollBar');
var zxcsbw=zxcsb.offsetWidth;
var zxcsbh=zxcsb.offsetHeight;
var zxcsbc=document.createElement('DIV');
var zxcdh=Math.floor(zxcsbh/zxcScrollDivs);
var zxcsbcS=zxcsbc.style;
var zxcd; var zxct=0;
for (var zxc0=0;zxc0<zxcScrollDivs;zxc0++){
if (zxcd){ zxcd=zxct.offsetTop; }

function zxcOpacity(obj,op){
if (op<0||op>100){ op=100; }
if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')'; }
else if (obj.style.KHTMLOpacity!=null){ obj.style.KHTMLOpacity=(op/100)-.001; }


<body onload="zxcFillScrollBar();" >
<div id="zxcScrollBar" style="position:absolute;width:20px;height:500px;border:solid red 1px;" ></div>