473,581 Members | 2,514 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

"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 3444
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*******@hotR EMOVEmail.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.image s) {
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.leng th;i++){
blogtv[i] = new Image();
blogtv[i].src = bltv[i];
}
}

and

if (document.image s) {
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.leng th;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(co unter);
if (document.image s) {
i--;
animOnb=eval("b logtv["+i+"].src");
document.tv.src =animOnb;
counter=setTime out("aniOnb()", 75);
if (i==0) clearTimeout(co unter);
}
}

function aniOffb(imgName ) {
clearTimeout(co unter);
if (document.image s) {
i++;
animOffb=eval(" blogtv["+i+"].src");
document.tv.src =animOffb;
counter=setTime out("aniOffb()" ,75);
if (i==6) clearTimeout(co unter);
}
}

// dailies
function aniOnd(imgName) {
clearTimeout(co unter);
if (document.image s) {
j--;
animOnd=eval("d aytv["+j+"].src");
document.tv.src =animOnd;
counter=setTime out("aniOnd()", 75);
if (j==0) clearTimeout(co unter);
}
}

function aniOffd(imgName ) {
clearTimeout(co unter);
if (document.image s) {
j++;
animOffd=eval(" daytv["+j+"].src");
document.tv.src =animOffd;
counter=setTime out("aniOffd()" ,75);
if (j==6) clearTimeout(co unter);
}
}

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

<a href="a.htm" onMouseOver="bu tOn('but1');ani Onb();return true;"
onMouseOut="but Off('but1');ani Offb();return true;"><img
src="images/blog.jpg" width="135" height="40" name="but1"
border="0"></a>

<a href="a.htm" onMouseOver="bu tOn('but2');ani Ond();return true;"
onMouseOut="but Off('but2');ani Offd();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(co unter);
if (document.image s) {
i--;
animOn=eval(ani mName+"["+i+"].src");
document.tv.src =animOn;
counter=setTime out("aniOn()",7 5);
if (i==0) clearTimeout(co unter);
img_on=eval(img Name+"_on.src") ;
document [imgName].src=img_on;
}
}

function aniOff(imgName, animName) {
clearTimeout(co unter);
if (document.image s) {
i++;
animOff=eval(an imName+"["+i+"].src");
document.tv.src =animOff;
counter=setTime out("aniOff()", 75);
if (i==6) clearTimeout(co unter);
img_off=eval(im gName+"_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.srcElemen t;
if (!obj.magic) return;
window.setTimeo ut("doit('"+obj .id+"',5,"+(++o bj.magic)+")",1 );
}
function unhowdy() {
var obj = event.srcElemen t;
if (!obj.magic) return;
window.setTimeo ut("doit('"+obj .id+"',-5,"+(++obj.magi c)+")",1);
}
function doit(objid,dx,m agicnum) {
var obj = document.getEle mentById(objid) ;
if (!obj || magicnum!=obj.m agic) return;
if (!obj.val) obj.val = 0;
obj.val += dx;
if (obj.val < 0) {
obj.val = null;
obj.style.filte r=null;
} else if (obj.val<50) {
obj.style.filte r="progid:DXIma geTransform.Mic rosoft.MotionBl ur(strength="+o bj.val+")";
window.setTimeo ut("doit('"+obj id+"',"+dx+","+ magicnum+")",10 );
}
}
</script>
<body onmouseover="ho wdy()" onmouseout="unh owdy()">
<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.c om (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.c om (asdf asdf) wrote:
window.setTimeo ut("doit('"+obj .id+"',5,"+(++o bj.magic)+")",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
8961
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 various forums where I am forced to sign up before I can read any answers. Interesting note here is that the guy in the office next
3
4869
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 evaluated. Can you tell me what is wrong with the statement? Audits: IIf(. Is Not Null,.,IIf(. Is Not Null,.,IIf. Is Not Null,.,IIf(. Is Not Null,.,0))))...
8
5056
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 have a query that will pull a single field from all the tables. In other words i should have 44 fields. when i try to do that same, i get an error...
12
1563
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 x and y were doubled. I'd like to
18
7835
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 Neg",(DLookUp("","")), IIf(="A Pos" And ="B Pos",(DLookUp("","")), IIf(="A Pos" And
1
1759
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 turning an option off so I may proceed further. From what I have researched, this error is because I have too many fields be filtered in the onload...
1
2146
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 table A add constraint A_const foreign key(col1) references B(col2);
1
1856
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 Nassau",IIf(="10-2","Loan Out to Suffolk",IIf(="10-3","Loan Out to CTHV",IIf(="10-4","Loan Out to Bronx",IIf(="10-5","Loan Out to...
0
7873
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8309
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7902
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8178
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6558
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5679
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3830
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2304
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1405
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.