Ortho > Documentation > Core - orthoImage

Ortho Documentation

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.
 
// Preload three images from URLs
orthoImage.loadImages('images/red.png', 'images/blue.png', 'images/green.png');
// Place an image in panel centered on coordinate 50,50
var img0 = new orthoImage(panel, 50, 50, 'red.png', 'center');
// Place an image in panel with its bottom right corner on coordinate 100,50
var img1 = new orthoImage(panel, 100, 50, 'blue.png', 'top-left');
// Place an image in panel with its top on coordinate 100,50
var img2 = new orthoImage(panel, 150, 50, 'green.png', 'bottom');