Fwd: Re: Javascript and twisted onmouseover

This is a MIME message. If you are reading this text, you may want to 
consider changing to a mail reader or gateway that understands how to 
properly handle MIME multipart messages.

--=_6B3FA53B.0D6C042D
Content-Type: text/plain
Content-Disposition: inline

test
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
--=_6B3FA53B.0D6C042D
Content-Type: message/rfc822

Received: from jcdcrs0.jobcorps.org ([10.1.139.1])
	by jcdc.jcdcnet.org (GroupWise SMTP/MIME daemon 4.1 v3)
	; Wed,  9 Sep 98 16:29:50 CDT
Received: (from hermes@localhost) by jcdcrs0.jobcorps.org id QAA52000 for <melendw(at)jcdc.jcdcnet.org>; Wed, 9 Sep 1998 16:16:45 -0500 (CDT)
Received: from mail.hwg.org(192.41.44.74) by jcdcrs0 via smwrap Version 2.3
	 id smwrapqHebMa; Wed Sep  9 16:16:01 1998
Received: (hwg2@localhost) by mail.hwg.org (8.8.5) id NAA06198; Wed, 9 Sep 1998 13:43:16 -0600 (MDT)
Received: from hwg.org (hwg(at)hwg.org [192.41.18.106]) by mail.hwg.org (8.8.5) id NAA06129; Wed, 9 Sep 1998 13:43:12 -0600 (MDT)
Received: from radiate.indy.net (radiate.indy.net [199.3.65.253]) by hwg.org (8.8.5) id NAA23945; Wed, 9 Sep 1998 13:42:58 -0600 (MDT)
Received: from indy4.indy.net (root(at)indy4.indy.net [199.3.65.4])
	by radiate.indy.net (8.8.7/8.8.7) with ESMTP id OAA01423;
	Wed, 9 Sep 1998 14:44:50 -0500 (EST)
Received: from localhost (pfarabee@localhost [127.0.0.1])
	by indy4.indy.net (8.8.7/8.8.7) with SMTP id OAA04448;
	Wed, 9 Sep 1998 14:44:48 -0500 (EST)
X-Sender: pfarabee@indy4
In-Reply-To: <35F5CE94.44CA30CD(at)geocities.com>
Message-ID: <Pine.SUN.3.96.980909141304.3981B-100000@indy4>
Sender: owner-hwg-graphics(at)hwg.org
Precedence: bulk
Date: Wed, 09 Sep 1998 14:44:48 -0500
From: Noone Special  <pfarabee(at)indy.net>
To: thefuggimator(at)geocities.com
Cc: hwg-graphics(at)hwg.org
Subject: Re: Javascript and twisted onmouseover
Mime-Version: 1.0
Content-Type: text/plain
Content-Disposition: inline

On Tue, 8 Sep 1998, Jeffrey Frazier wrote:

> I am looking for a way to change an image in another table cell when the
> mouse is passed over an image. That is, you move over the image and
> another image somewhere on the page changes. Does anyone know where I

Javascript is just an object-oriented script language.  It could care less
which object you are modifying and where it is on the screen.  You can
modify objects in different tables, different frames, different windows,
and even change 2, 3, 4, 5, .... objects after a single trigger event.
You can even store "state" information to tell the script what to do under
certain circumstances (change to this if this, but to this if this, and
don't change if this, etc)

A good example of a complex-action JavaScript can be found at:
http://www.orthopaedicsindpls.com/maps.html

It is a map of Indiana that lays out locations for the company the site
was made for.  When you move around the image map, insert maps appear to
give you a closer look at the general area.  If you click the mouse while
the insert map is visible, that location is "locked" in place, and a small
toolbar appears with 3 options (Directions, Doctors, and Close)
which will give you a link to Mapquest directions, or a listing of the
employees of that location, or will "unlock" the location.

While a location is locked, no other insets will appear, and the one that
is active will remain locked in position.  If you click the "X" to unlock
the inset, then the map returns to its original functionality.

I forget how long the script took me to write for the client, but it was
actually fairly simple once I laid out how it would work.

This script actually uses some of an earlier script I wrote to handle
JavaScript animation (I reduced frame animation to an object-based system,
so all you had to do to start the animation is make a call to the start
routine, and all you had to do to stop it was make a call to the stop
routine)

An example of this object-based animation can be found at:

http://www.a1.com/

(The script is not very friendly, and has been optimized to it's absolute
minimum filesize, since it is included on every page in the site)

To customize the script, I simply need to change the lines toward the
bottom of the script section that set the animation frames.

setBT("about",3);

For example, if I had a button animation called "Button3" that had 5
frames, I would save the frames as:
img/anim/Button31.gif
img/anim/Button32.gif
img/anim/Button33.gif
img/anim/Button34.gif
img/anim/Button35.gif

Then I would name the IMG tag that would hold the animation "Button3"
and make a call to setBT:
setBT("Button3",5);  (Set Button.. call it "Button3".. it has 5 frames)

once that is done, I simply need to call the "down" animate routine with
the label I gave the button:
bt_dn('Button3');

when the mouse moves away:
bt_up('Button3');

These three easy steps give me the simplest, quickest java button
animations ever, since all the actual programming is already done, and all
that needs to change is the configuration.

Whats more, the page loads quickly, since the bodyLoad() function takes
care of the initializing of loading the animation frames (after the body
is finished loading, the animation frames begin to load)  And the bt_dn
function takes care of checking to make sure all the animation frames for
the animation it is about to start are loaded.. if they aren't, it won't
animate yet.

Anyway, this is one of my favorite scripts, and I enjoy talking about
it (can you tell? ;)  And parts of it have been the foundation for several
other projects (including the Orthopaedics Indianapolis map page) that
would have been very intimidating without the ground work already done.

I have actually considered going the next step and creating a full-page
javascript animation sketch.  Perhaps some sort of cartoon or something.
I would need to come up with a better timing mechanism, but that shouldn't
be too difficult.

Pat









--=_6B3FA53B.0D6C042D--

HWG: hwg-graphics mailing list archives, maintained by Webmasters @ IWA