ActiveImages Readme

The ActiveImages product provides methods for creating images which activate/deactivate based on a user's actions. It consists of a main "ActiveImages" object which acts as a container for "ActiveImage" objects.

Features include:

JavaScript Rollovers

Turns the image "on" when the mouse is over the image, reverts the image back to it's "off" state when the mouse moves off of the image.

The "On" and "Off" values can be either relative paths or full URLs

(Requires JavaScript)

Triggers (Multiple JavaScript Rollover feature)

A trigger sets off another rollover in addition to the current rollover. i.e. Move your mouse over an image, and see several images roll over at the same time.

Step 1: Under the "Triggers" tab, create a new trigger
Step 2: Choose the ActiveImage you want to trigger
Step 3: Specify the image you want to display when triggered (the "on" image)

A Trigger's "On" value can be either a relative path or a full URL

(Requires JavaScript)

Active Paths

This feature is designed to provide rollover-like activity without JavaScript.

It takes a list of relative paths on which to turn the image "on". By default the image is displayed in it's "off" state, but when displayed on one of the given relative paths, the image will be made active (displayed in it's "on" state").

Example:

If we were to set the ActivePath of an image to "/myFolder/myPage.html", then the image would only become active on the URL "http://zopeServer/myFolder/myPage.html".

If we change the ActivePath to "/myFolder/", then the image would become active on any page in that folder, any URL that starts with "http://zopeServer/myFolder/"

(No JavaScript needed!)

Sticky Images

Originally designed for toolbars which are placed in a separate file in a separate frame. A Sticky image can be thought of as an On/Off button. When clicked, it is turned on. It remains on until it is clicked again to turn it "off".

Note: Sticky Toolbars are a standalone feature and aren't meant to be used in conjunction with other features such as Rollovers, ActivePaths or Triggers.

(Requires JavaScript)

Sticky Image Groups

Groups of Sticky images act in the same way as HTML radio buttons. There can never be more than one(1) item active in the group at any time. i.e. If itemA is active, then itemB and itemC must be inactive.

Sticky Images are placed in groups by:

1. Creating some groups by editing the "group" list of the main ActiveImages object.
   (Located under the Properties tab, one group per line)

2. Setting the "Group" attribute of all items in the group to the same name.

(Requires JavaScript)

Linkage (Advanced Image Linking)

The Linkage tab is used to link your image to another URL and open the URL in a new browser window with specific dimensions and appearance if desired.

• URL to Display (link) - Link your image to a URL
• Window Name (target) - Name of the target Window or Frame
• Open in New Window (NewWindow) - If set to "yes", the link will be opened in a new browser window
• Window Width - guess
• Window Height - guess again
• Window Attributes - Specify the appearance of the new window

NOTE about Object Properties:

The first 3 items above represent separate object properties (link, target, NewWindow) - this is not so for the "Window Width", "Window Height" and "Window Attributes" items. These attributes are instead parsed and compiled into 1 property named features - a single string of comma-separated name=value pairs which describe the appearance of the new browser window. There are 8 variables which can be specified (see below). The first 6 have a value of "yes" or "no". The "width" and "height" values represent size in pixels. To override these variables via DTML, you would pass the features variable as the string format decribed above.

toolbar=yes
location=yes
status=yes
menubar=yes
scrollbars=yes
resizable=yes
width=300
height=300

Note: See DTML Usage for an example of calling an image using Image Linking

Image Chooser

The Image Chooser allows you to choose an Image by finding it using a ZOPE navigation tree and selecting it. You will find it under the "Properties" and "Triggers" tabs. To the right of the "On", "Off" and "Trigger" text fields, you will see a folder icon. When you click on it you will be taken to the Image Chooser.

Validator

The Vaildator is a Debugging tool. It studies each ActiveImage to verify that all specified On, Off, Multiple-Rollover(Trigger) and Group attributes are valid, then prints any errors.

Preview

The Preview tab lets you see how your images will look and react to each other.

DTML Usage

<html>
<head>

<!-- Create the <SCRIPT> tag -->
<dtml-with ActiveImages>


<!-- Ex 1: Pre-load ALL images using one call-->
<dtml-var JavaScript>

<!-- OR - Ex 2: Call each element of the JavaScript separately for more control -->
<dtml-var js_header>



<!-- Simple: call js() routine of each ActiveImage -->
<dtml-in "objectValues('ActiveImage')">
    <dtml-var js>
</dtml-in>

<!-- Advanced: Override a single object's Properties by passing arguments -->
<dtml-with ActiveImage1>

<dtml-var "js(

title = 'Substitute Title',
on = site_url + on,
off = site_url + off,
rollover = 1,
sticky = 1,
group = 'Substitute Group Name',
ActivePaths = [ '/path/one', '/path/two', '...' ],
triggers = [ [ 'http://path/to/ActiveImage', 'http://path/to/Image' ], ['...','...'] ]
link = 'http://www.myHome.com',
target = 'My_Home',
NewWindow = 1
features = 'toolbar=yes,location=yes,status=yes,menubar=yes,' +
             'scrollbars=yes,resizable=yes,width=300,height=300'

)">


</dtml-with ActiveImage1>



<dtml-var js_footer>


</dtml-with ActiveImages>

<-- Print <img> tag -->
<dtml-var "ActiveImages.ActiveImage1">

</html>