| Ortho Core JavaScript Classes |
| |
orthoImage |
| | |
new orthoImage(parent, left, top, name, placement [, options]) |
| |
parent: The Ortho object in which the image will be placed |
| |
left, top: The integer pixel coordinates within the object where the image will be placed (see placement below). |
| |
name: The short name for the image that will be displayed in this object (see preload below). |
| |
placement: Specifies the placement of the image relative to the left and top coordinates. This is
defined buy a string containing one or two of the following terms: center, top, bottom, left, right.
|
| |
Placement strings define the location of the image relative to the left and top coordinates (not the other way around).
In other words the string 'bottom-right' places the image below and to the right of the coordinates.
If the placement in one axis is omitted it defaults to 'center'. So the placement 'top' will place the
image above the supplied top coordinate and with its x-axis placement centered on the supplied 'left'
coordinate. If the only placement string is center then the image will be centered in both x and y
axes on the supplied coordinates. Placement strings can be upper or lower case, in any order and
with any separator. For example the strings 'bottom-right', right bottom', 'BOTTOMRIGHT' are all
equivalent. Placement strings must be logically consistent. For example 'left right' is not valid.
Placement is optional as long as no options hash is supplied. If omitted, placement defaults to 'bottom-right'.
|
| |
options: A hash of options for this object. These can include the cssClass option which
specifies a CSS class to use instead of the default for this object (.orthoImage).
The options hash is optional. |
| |
orthoImage.loadImages([list of image URLs]) |
| |
In order to make image display as smooth as possible, images are preloaded into the browser before
any code that manipulates them is executed. Ortho provides the utility function loadImages that
will preload all images from the supplied list of URLs as well as storing the URLs
in the array orthoImage.src, which allows the full URL to be retrieved using the short name of the file.
This is derived by removing all leading path information from the source URL.
|
| |
NOTE: Problems viewing images in Internet Explorer in Initial Release (0.1x)
IE will not display PNG images with transparent regions correctly. This is a well known problem
and a fix is available (e.g.
IE PNG Fix)
. I'm working on incorporating this in the Ortho library directly.
More importantly, there has been an issue in preloading images in IE. I have fixed this by delaying
execution of the main function until all images have been loaded. This may have performance
implications and I'm continuing to work on this issue.
|
| |
orthoImage.loadImages('images/red.png', 'images/blue.png', 'images/green.png');
var img0 = new orthoImage(panel, 50, 50, 'red.png', 'center');
var img1 = new orthoImage(panel, 100, 50, 'blue.png', 'top-left');
var img2 = new orthoImage(panel, 150, 50, 'green.png', 'bottom');
|