©2000-2002 3Dize Inc. All rights reserved |
Events Fundamentals |
Overview The Events feature of the Cool Page program is an easy way to create customized "Dynamic" web pages, without programming. It's like having your own personal web programmer on call at your finger tips. "Dynamic" pages are those which change and move, often interactively with where the visitor moves or clicks the mouse. Contrast this with "static" pages which do not change, or "animated" pages which do not interact with visitor. Even if only used for non-interactive animations, "Dynamic" pages have page global possibilities as compared to localized image animations. To make dynamic web pages with Cool Page, all that you need to know are a few basic rules and how to use the program's tools. The basic rules are below, while the actual use of the tools are covered in the Events Guides themselves. Basic Rules 1. All Events are configured and initiated using any image on the page, including Invisible Object images, via the Image Object Properties. Note - A future version of Cool Page may allow any type of Object or snippet of text to be configured to initiate an Event. 2. Any object on the page can be the Target Object in an Event, eg Text Boxes, Colored Boxes, other images, animations, java applets, etc. 3. Events will work in web browsers that have javascript enabled, which is about 88% of all browsers on web. Click here to see browser statistics of a high traffic website. Note - If your Event does not work, see the Troubleshooting section. Image Object Properties Open the Image Object Properties in order to configure an Event, double-click any image on the page or right click the image, or select the image and click the Edit Menu/Object. Click the Events Tab. Click the "New" button to start configuring an Event. |
Definitions Name: Enter a name for your Event. If more than one Event is used with a single image, they will be stored by Cool Page and available in the dropdown list. Events can be edited by selecting the name in the list. Type: Choose an Event Type. Event Types determine when or what action a user must do to initiate the Event on the actual web page. onAbort - This is when a user cancels the loading of an image by either clicking stop in the browser or clicking another link before the image has loaded. onClick - This is when a user clicks on an image. (presses and releases the mouse button) onDblClick - This is when a user double-clicks on an image. (presses and releases the mouse button twice) onLoad - This is when the image loads in the web browser. onMouseOver - This is when the user puts cursor on the image. onMouseOut - This is when the user moves the cursor off the image. onMouseDown - This is when the user presses the mouse button while the cursor is on the image. (mouse button not yet released) onMouseUp - This is when the user releases the mouse button while the cursor is on the image. Action: Choose an Event Action. The Action is "what will happen" with the selected Event Type, a user interacts with an "image-with-event" on the web page or when the "image-with-event" loads on the web page. Set Image - The image is replaced by another image. Play - A sound will play. Stop - A sound will stop fully. Pause - A sound wil be paused. Show - Make any object on page become visible. Hide - Make any object on page become invisible. Move - Move an object to a specific position on page. Offset - Move an object from current position a specified horizontal and vertical distance. Script - Initiate a javascript. (your code required; for advanced users) Target Object Every object on the page is in the dropdown list here. Choose an object to be affected by the selected Event Type and the selected Action. Cool Page will show all objects without a given name as such: |
To avoid confusion and make this list easier to work with, give Names to the objects
on the page that will be used in Events. To do this, open the Object Properties for each object and click the General Tab. Type in a unique name for each object used with Events. The above list could now look like this: |
Note - It is not allowed to have 2 objects whose Target Objects are each other.
Instead use an Invisible Object on top of one of the objects and set the
Events for that object on the Invisible Image instead. More about using
Invisible Objects with Events here. |