473,320 Members | 2,158 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

"complex" rollover animation question

I'm relatively new to scripting in JavaScript, so I'm not too
surprised I'm having difficulty scripting up an animation effect for
my personal site.

What I'm trying to do is the following: When I go onMouseOver on a
button in a nav bar, I want that button to switch to a different image
while at the same time another blank image changes as an animation to
an associated image. When I go onMouseOut, the bar image reverts back
to the original and the blank area image steps back through the
animation to the original, blank image.

I can get this to work for a single nav bar button, but when I attempt
to generalize the functions to work for the second nav bar button (and
a second, different animation that occurs in the same blank area), it
fails.

I can get the second nav button to work correctly on rollover by
splitting the simple rollover function out from the animation
function, but I cannot get the second animation to work regardless.

Any suggestions on how I might solve this problem? I can post code if
necessary.

Thanks a lot.

Brian
Jul 20 '05 #1
5 3417
DU
Brian Angliss wrote:
I'm relatively new to scripting in JavaScript, so I'm not too
surprised I'm having difficulty scripting up an animation effect for
my personal site.

What I'm trying to do is the following: When I go onMouseOver on a
button in a nav bar, I want that button to switch to a different image
while at the same time another blank image changes as an animation to
an associated image. When I go onMouseOut, the bar image reverts back
to the original and the blank area image steps back through the
animation to the original, blank image.

I can get this to work for a single nav bar button, but when I attempt
to generalize the functions to work for the second nav bar button (and
a second, different animation that occurs in the same blank area), it
fails.

I can get the second nav button to work correctly on rollover by
splitting the simple rollover function out from the animation
function, but I cannot get the second animation to work regardless.

Any suggestions on how I might solve this problem? I can post code if
necessary.

Thanks a lot.

Brian


I know it's possible (even easy) to do rollover effects on 2 groups of
objects.

Without being able to see any code out of your post and no url, it's
extremely difficult to suggest anything concrete (furthermore if your
code is complex according to you)... just general not-too-commital
guesswork. Is your webpage markup syntax valid, validated?

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

Jul 20 '05 #2
On Thu, 11 Sep 2003 01:07:58 -0400, DU <dr*******@hotREMOVEmail.com>
wrote:
I know it's possible (even easy) to do rollover effects on 2 groups of
objects.

Without being able to see any code out of your post and no url, it's
extremely difficult to suggest anything concrete (furthermore if your
code is complex according to you)... just general not-too-commital
guesswork. Is your webpage markup syntax valid, validated?

DU


The following is how I'm pre-loading the animation images:

if (document.images) {
bltv=new Array();
bltv[0]="images/blogtv6.jpg";
bltv[1]="images/blogtv5.jpg";
bltv[2]="images/blogtv4.jpg";
bltv[3]="images/blogtv3.jpg";
bltv[4]="images/blogtv2.jpg";
bltv[5]="images/blogtv1.jpg";
bltv[6]="images/base_tv.jpg";

blogtv = new Array();
for (var i=0;i<bltv.length;i++){
blogtv[i] = new Image();
blogtv[i].src = bltv[i];
}
}

and

if (document.images) {
dytv=new Array();
dytv[0]="images/daytv6.jpg";
dytv[1]="images/daytv5.jpg";
dytv[2]="images/daytv4.jpg";
dytv[3]="images/daytv3.jpg";
dytv[4]="images/daytv2.jpg";
dytv[5]="images/daytv1.jpg";
dytv[6]="images/base_tv.jpg";

daytv = new Array();
for (var j=0;j<dytv.length;j++){
daytv[j] = new Image();
daytv[j].src = daytv[j];
}
}

The simple rollover function works just fine, but I can't get the two
animations to work properly. The code below is what i'm trying to get
working:

// blog
function aniOnb(imgName) {
clearTimeout(counter);
if (document.images) {
i--;
animOnb=eval("blogtv["+i+"].src");
document.tv.src=animOnb;
counter=setTimeout("aniOnb()",75);
if (i==0) clearTimeout(counter);
}
}

function aniOffb(imgName) {
clearTimeout(counter);
if (document.images) {
i++;
animOffb=eval("blogtv["+i+"].src");
document.tv.src=animOffb;
counter=setTimeout("aniOffb()",75);
if (i==6) clearTimeout(counter);
}
}

// dailies
function aniOnd(imgName) {
clearTimeout(counter);
if (document.images) {
j--;
animOnd=eval("daytv["+j+"].src");
document.tv.src=animOnd;
counter=setTimeout("aniOnd()",75);
if (j==0) clearTimeout(counter);
}
}

function aniOffd(imgName) {
clearTimeout(counter);
if (document.images) {
j++;
animOffd=eval("daytv["+j+"].src");
document.tv.src=animOffd;
counter=setTimeout("aniOffd()",75);
if (j==6) clearTimeout(counter);
}
}

And I'm calling the functions using the two following test lines of
markup:

<a href="a.htm" onMouseOver="butOn('but1');aniOnb();return true;"
onMouseOut="butOff('but1');aniOffb();return true;"><img
src="images/blog.jpg" width="135" height="40" name="but1"
border="0"></a>

<a href="a.htm" onMouseOver="butOn('but2');aniOnd();return true;"
onMouseOut="butOff('but2');aniOffd();return true;"><img
src="images/daily.jpg" width="135" height="40" name="but2"
border="0"></a>
I had originally tried to get things working with a single animation
function and found that I couldn't get it to work right. That code is
below:

function aniOn(imgName, animName) {
clearTimeout(counter);
if (document.images) {
i--;
animOn=eval(animName+"["+i+"].src");
document.tv.src=animOn;
counter=setTimeout("aniOn()",75);
if (i==0) clearTimeout(counter);
img_on=eval(imgName+"_on.src");
document [imgName].src=img_on;
}
}

function aniOff(imgName, animName) {
clearTimeout(counter);
if (document.images) {
i++;
animOff=eval(animName+"["+i+"].src");
document.tv.src=animOff;
counter=setTimeout("aniOff()",75);
if (i==6) clearTimeout(counter);
img_off=eval(imgName+"_off.src");
document [imgName].src=img_off;
}
}

I could get it working before I generalized
eval("name["+i+"].src")
to
eval(animName+"["+i+"].src")

It freaked out and started misbehaving in all sorts of ways. So now
I'm trying a brute-force approach with multiple functions.

I realized last night that if I move the mouse from button1 to
button2, the first animation doesn't complete and the animation hangs
at the step when I went over button2. I'll need to fix that too, but
I want to get the multiple animations working first. One thing at a
time.

Brian
Jul 20 '05 #3
Hello, here is something that I threw together (hence its crappiness)
that I think demonstrates some of the things you are trying to do:
<script>
function howdy() {
var obj = event.srcElement;
if (!obj.magic) return;
window.setTimeout("doit('"+obj.id+"',5,"+(++obj.ma gic)+")",1);
}
function unhowdy() {
var obj = event.srcElement;
if (!obj.magic) return;
window.setTimeout("doit('"+obj.id+"',-5,"+(++obj.magic)+")",1);
}
function doit(objid,dx,magicnum) {
var obj = document.getElementById(objid);
if (!obj || magicnum!=obj.magic) return;
if (!obj.val) obj.val = 0;
obj.val += dx;
if (obj.val < 0) {
obj.val = null;
obj.style.filter=null;
} else if (obj.val<50) {
obj.style.filter="progid:DXImageTransform.Microsof t.MotionBlur(strength="+obj.val+")";
window.setTimeout("doit('"+objid+"',"+dx+","+magic num+")",10);
}
}
</script>
<body onmouseover="howdy()" onmouseout="unhowdy()">
<img magic=1 id=but1 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but2 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but3 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but4 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but5 src="http://www.google.com/images/logo.gif"><br>
<img magic=1 id=but6 src="http://www.google.com/images/logo.gif"><br>
</body>
Jul 20 '05 #4
Thanks a lot for the suggested code. I'll give it a shot and see if I
can make it work.

Brian

On 11 Sep 2003 17:54:17 -0700, b0*****@yahoo.com (asdf asdf) wrote:
Hello, here is something that I threw together (hence its crappiness)
that I think demonstrates some of the things you are trying to do:


Jul 20 '05 #5
I'm trying to get your example working, and I'm getting errors on the
setTimeout of howdy()

On 11 Sep 2003 17:54:17 -0700, b0*****@yahoo.com (asdf asdf) wrote:
window.setTimeout("doit('"+obj.id+"',5,"+(++obj.ma gic)+")",1);


Basically, the JS Console in Navigator 7.0x says that the above
statement is "missing a ')' after the argument list" I don't see
where - any suggestions why it's freaking out?

Thanks for your help.

Brian
Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Starbuck | last post by:
OK, first let me say that I am no DB person. But I have a user here who keeps getting this error whenever she does, whatever it is she does, with databases... A google search takes me to...
3
by: Susie Swint | last post by:
I have the following IIf statement which worked in Access 95 but will not work in Access 2002. The error message I get is that the expression is typed incorrectly, or is too complex to be...
8
by: Matt | last post by:
Hi all, Thank you for taking the time. I have a database with 45 tables on it. 44 tables are linked to a main table through a one to one relationship. My question is, is there no way i can...
12
by: Russ | last post by:
I tried the following: >>> x = complex(4) >>> y = x >>> y *= 2 >>> print x, y (4+0j) (8+0j) But when I tried the same thing with my own class in place of "complex" above, I found that both...
18
by: njgreen2001 | last post by:
I thought the length of this might give me problems. Any suggestions on how to shorten it? Expression: =IIf(="A Pos" And ="A Pos",(DLookUp("","")), IIf(="A Pos" And ="A...
1
by: wayniac | last post by:
I am having a problem when I try and remove several fields from the lookup. I have many fields, and the error I am getting is "Expression is too complex", is there anyway of going around this or...
1
by: Rahul Babbar | last post by:
Hi, I ran the scripts in a file from Command Line Processor and it gave the error for all the constraints being added, but not the indexes being added. For a simple statement like Alter...
1
cori25
by: cori25 | last post by:
Paycode': IIf(="01","Meeting",IIf(="02","Training",IIf(="04","Special Project",IIf(="05","QC",IIf(="06","MDU",IIf(="07","UG",IIf(="08","2nd Man",IIf(="09","Sr Tech Other",IIf(="10-1","Loan Out to...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.