:: Dynamic Text Camera  Author Joe McCormack

Examples That Use Mouse Position:

Example Text Link One :: Illustrates indefinite action

Example Text Link Two :: Illustrates big to small single action

Example Text Link Three :: Illustrates small to big single action

Example Text Link Four :: Illustrates small to big single action with a larger font

Examples That Use Fixed Position:

Example Text Link One :: Illustrates indefinite action

Example Text Link Two :: Illustrates big to small single action

Example Text Link Three :: Illustrates small to big single action

Example Text Link Four :: Illustrates small to big single action with a larger font

How To Put The Dynamic Text Camera On Your Webpages:

The Dynamic Text Camera control was written to use the same code block for an unlimited number of calls within a web page and through an entire web site. This means that you only need to change parameters within the function parameters instead of having to change the source file...thus one source file and virtually unlimited ways to call it and obtain different effects. Some of the effects are demonstrated above. You will notice that all that was changed was the parameters in each link to obtain different effects.

In order to use the Dynamic Text Camera control on your web site you need to follow these steps:

  1. Download the jtcamera.js file into your computer. Usually you will want to place the control in the same folder as the web pages that will call it.
  2. Place the following javascript code between the <HEAD> and </HEAD> tags of your web page:
    <script language="javascript" src="dtcamera.js">
    <!--
    /*
      Dynamic Text Camera. Author Joe McCormack. Copyright 2003. All Rights Reserved.
      www.geocities.com/code_stratos/
    */
    //-->
    </script>
  3. Place the following div tag on your web page(s):
    <!-- Place the following tag on your web page between the opening and closing body tags -->
    <div id="glove" style="position:absolute;"></div>
  4. Decide what effects, color, position, speed, text size, message and so on you want the effect to display.
  5. Decide how you want to impliment the effect. If you just want to use it once on a web page, you may wish to place it in the <body onload="oncamera(...);"> tag. See the code segment below for how to do this:
    <body onload="oncamera('negative','true','Welcome','red','maroon','bold','trebuchet ms',8,90,100,2,50,50,'false');">
  6. If you want to, instead, impliment the effect with mouseovers, see the example code block (for a link) shown below. Remember that each instance you want to have on your web page can be different...all you have to do is change the parameters of the oncamera(...) function.
    <a href="somelink.html" onmouseover="oncamera('positive','true','FOREVER!','red','maroon','bold','trebuchet ms',8,20,100,2,50,500,'false');" onmouseout="offcamera();">Example Text Link One</a> :: Illustrates indefinite action
  7. Reference the information below for what each parameter does.

DYNAMIC TEXT CAMERA PARAMETER SPECIFICS:

------------------
FUNCTIONS OVERVIEW:
Function: oncamera(a, b, c, d, e, f, g, h, i, j, k, l, m, n)
------------------
Function Parameters:
a = "negative" What perspective do you want to start at (negative = biggest, positive = smallest)
b = "true" True = change perspectives infinitely. False = complete one perspective and then stop
c = "Welcome" Text message to be effected
d = "red" Foreground color of text. Can also be HEX if desired.
e = "maroon" Background color of text. Can also be HEX if desired.
f = "bold" Text weight. Either "bold" or "" or "normal" for normal
g = "trebuchet ms" Font family. More than one can be specified.
h = 8 Minimum point size for text
i = 90 Maximum point size for text
j = 100 Starting index or layer value of text
k = 2 Pause interval between actions
l = 50 Y coordinate of effect (top left corner)
m = 50 X coordinate of effect (top left corner)
n = "true" True = place effect at mouse's current position. False = place effect at l, m coordinates specified by user.

Function: offcamera()
Function Parameters: None. This command stops the function and removes it from the web page.



1