faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

67 of 116 people (58%) answered Yes
Recently 5 of 10 people (50%) answered Yes


How can I make an arrow image rotate to track mouse cursor orientation about some point on the page

Apr 7th, 2008 22:31
ha mo, Mark Szlazak, Mark Szlazak, http://members.aol.com/myscript/cue.html

There are a couple of ways to do this and I will illustrate one with a 
pool cue and cue ball example. 
A cue image is moved around a ball image based on the orientation of 
the mouse cursor around the ball. 179 same dimension gif's each of one 
pool cue image are made so that a successive gif's cue image is 
oriented 2 degrees clockwise (or counterclockwise) from the cue image 
of the gif before it. These gif's are all part of an image rollover 
object which resides inside a layer. This layer moves around the ball 
based on cursor orientation with that orientations associated cue image 
being displayed. This works smoother and faster than hiding and showing 
a layer from a set of layers in which each member has a single 
differently oriented cue image. Check out the above URL for details on 
coding and the basic math that is involved for this example.
Another method used by Scott Porter of JavaScript-Games.org in his pool 
game is to use one large gif of 179 cue images arranged in rows. The 
large gif is then clipped and moved around the ball based on cursor 
orientation and gives the same effect.