CF_IMG v3

Created by Marcel Bennett for Serious Multimedia, Victoria, Australia

The Image element is used to incorporate in-line graphics into a HTML document.
This version can be used for database generated src's by allowing a default image to be set.

The Image element, which is empty (no closing element), has these attributes:

NEW FEATURES IN v3

Version history

home

JAVACODE IMPORTANT must read!
The JAVACODE attribute should be on it's own at the top of the document inside the HEAD tag where the javascript is to be displayed. JAVACODE is only a mandatory attribute of the <CF_IMG> element if the src2 is set, in this case without this tag it will not function. Example of use:

    <HTML>
    <HEAD>
        <TITLE> whatever <TITLE>
        <cf_img javacode>
    <HEAD>
The JAVACODE attribute must not be set within the tag at any other point.

SLIDESHOW="comma separated image list"
The SLIDESHOW attribute is ONLY applied to the tag within the header tags. It allows for the tag to be used for creating a slide show of images. Leaving the value blank allows the need of a drop down form box to specify the images to be shown.

    <HTML>
    <HEAD>
        <TITLE> whatever <TITLE>
        <cf_img javacode slideshow="image1.gif,image2.gif,image3.jpg">
    <HEAD>
The tag requires the following form to be on the page with appropriate values if left blank:
<form name=slideform>
    <select name="slide" onChange="slideshow_change();">
        <option value="image1.gif" selected>1
        <option value="image2.gif">2
        etc...
    </select>
</form>

HREF="URL of page to be linked to"
The value of the HREF attribute is the URL of the page that the image will link to. Its syntax is the same as that of the HREF attribute of the <A> element.

PATHTYPE=RELATIVE (default), ABSOLUTE
The PATHTYPE attribute tells the tag if it needs to run the ExpandPath function on the src that is entered.
Relative path is the default and does not require a full path.

SRC="URL of image"
The value of the SRC attribute is the URL of the image to be displayed. Its syntax is the same as that of the HREF attribute of the <A> element. SRC is the only mandatory attribute of the <CF_IMG> element.

<CF_IMG SRC="image.gif">

SRC2="URL of rollover image"
The value of the SRC2 attribute is the URL of the image to be displayed when rollover occurs. Its syntax is the same as that of the HREF attribute of the <A> element.

<CF_IMG SRC="one.gif" SRC2="two.gif"> Be sure to read these instructions.

NOSRC="URL of default image"
The value of the NOSRC attribute is the URL of the image to be displayed when the database returns an invalid image name. Its syntax is the same as that of the HREF attribute of the <A> element.

<CF_IMG SRC="one.gif" SRC2="two.gif" NOSRC="default.gif"> All image src's are checked to make sure they exist before displaying.

NOSRC2
The NOSRC2 attribute is similar to NOSRC only it still allows for rollover functionality.

<CF_IMG SRC="one.gif" SRC2="two.gif" NOSRC="default.gif" NOSRC2="rollover_default.gif">

FIRST, PREV, NEXT, LAST, START, STOP, ROTATE
The FIRST, PREV, NEXT, LAST, START, STOP, ROTATE attributes define images that are also buttons to operate the slideshow functionality.
The ROTATE attribute is the same as having stop and start only in one button not two.
When any of these properties are added to the tag the NAME property becomes the element name and HREF attributes are ignored to allow for the code required to perform the appropriate function.

<cf_img src="whatever.gif" src2="whatever2.gif" first>

TD
The TD attribute sets the td tags to be displayed before and after the image. It gives them the same attributes as the image.

<CF_IMG SRC="one.gif" SRC2="two.gif" TD>

The SRC attribute can accept fully qualified, or partial, relative URL's, or even just image names (providing the image is located in the same directory as the HTML document).

WIDTH=value HEIGHT=value
The WIDTH and HEIGHT attributes allow the browser to determine the text layout surrounding images before the entire image has been downloading, which can significantly speed up display of the document text. If the author specifies these, the viewer of their document will not have to wait for the image to be loaded over the network and its size calculated. Internet Explorer and Netscape use image placement mechanisms, so that if the display of in-line images has been turned off, the space that the images would occupy in the page is marked as if the image were there (with any ALT text being displayed in the place holder). This allows authors to be sure that the text layout on the page will be as desired, even if the user is not displaying the images.

MAXWIDTH=value MAXHEIGHT=value
The MAXWIDTH and MAXHEIGHT attributes tell the tag the maximum allowable space for an image. If the author specifies these, the tag will draw out the width and height of the image and set width and height attributes to proportionally reduce the size of the image to acceptable levels. Both attributes are optional and can either be used alone together or not at all.

OUTPUT="a name to define returning variables"
The OUTPUT attribute tells the tag the required name or returning variables.

<CF_IMG SRC="triangle.gif" OUTPUT="serious">
 
Will return the following variables:
(The original file dimensions)
serious_ImgFileWidth
serious_ImgFileHeight
(The recalculated file dimensions)
serious_ImgWidth
serious_ImgHeight
serious_ImgType
serious_ImgKBytes
serious_ImgResized
 
<CF_IMG SRC="triangle.gif">
 
Will return the following variables:
(The original file dimensions)
ImgFileWidth
ImgFileHeight
(The recalculated file dimensions)
ImgWidth
ImgHeight
ImgType
ImgKBytes
ImgResized

BORDER=value
This lets the document author control the thickness of the border around an image displayed.
It is useful if the image is to be a hyperlink, in that the BORDER can be set to "0" to avoid the display of the standard blue hypertext link border.

VSPACE=value HSPACE=value
For the floating images (i.e. those displayed with an ALIGN=left|right attribute) it is likely that the author does not the text wrapped around the image to be pressed up against the image. VSPACE controls the vertical space above and below the image, while HSPACE controls the horizontal space to the left and right of the image. The Value should be a pixel value.

NAME
This attribute sets the name of the image in the document. It can then be accessed by scripting methods (in Netscape 3.0 and Internet Explorer 4.0 and above), by referencing the Images collection.

TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <CF_IMG> section. Note that any text provided in the TITLE attribute overrides that presented in the ALT attribute as the ToolTip - the contents of the ALT attribute will only be seen if the image can't be loaded for any reason.

CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <CF_IMG> element as using a particular style sheet class. See the Style Sheets topic for details.

STYLE="In line style setting"
As well as using previously defined style sheet settings, the <CF_IMG> element can have in-line stylings attached to it. See the Style Sheets topic for details.

ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <CF_IMG> element for scripting purposes. Any <CF_IMG> element with an ID attribute can be indirectly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.

ONMOUSEOVER and ONMOUSEOUT
This attribute can be used the same way as with most tags.

ALIGN="left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom"
ALIGN=left image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
ALIGN=right will align the image aligns with the right margin, and the text wraps around the left.
ALIGN=top aligns itself with the top of the tallest item in the line.
ALIGN=texttop aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
ALIGN=middle aligns the baseline of the current line with the middle of the image.
ALIGN=absmiddle aligns the middle of the current line with the middle of the image.
ALIGN=baseline aligns the bottom of the image with the baseline of the current line.
ALIGN=bottom aligns the bottom of the image with the baseline of the current line. (Essentially, this is the same as ALIGN=baseline)
ALIGN=absbottom aligns the bottom of the image with the bottom of the current line.

ALT="Alternative Text"
Optional text as an alternative to the graphic for rendering in non-graphical environments. Alternate text should be provided for whenever the graphic is not rendered (i.e. if the user has image loading turned off). Alternate text is mandatory for Level 0 documents. Internet Explorer and Netscape (4.0 and above) also use any ALT text set as a ToolTip to be displayed when the users mouse pauses over the image. Example of use:

<CF_IMG SRC="triangle.gif" ALT="Warning: Be sure to read these instructions!">

SERVER="addition server properties"
The SERVER attribute is used to specify the <CF_IMG> element as being in a specific hosting environment.
Currently the only option is: cfmresourcesserver which is for cfm-resources.com hosting.

Example for www.cfm-resources.com hosting ONLY:
<CF_IMG SRC="triangle.gif" SERVER="cfmresourcesserver" accountname="Account Name" accountpassword="Account Password">

NOPROPS
The NOPROPS attribute is used to bypass the cf_imgsize tag.
This is also used when you wish to allow slideshow images to be displayed in different sizes.

NOTE: NO WIDTH or HEIGHT value will be given to the output if this attribute is included!

NEW FEATURES IN v2.3

NEW OUTPUT VARIABLES

OUTPUT="a name to define returning variables"
The OUTPUT attribute tells the tag the required name or returning variables.

<CF_IMG SRC="triangle.gif" OUTPUT="serious">
 
Will return the following variables:
serious_ImgFileWidth (The original file dimensions)
serious_ImgFileHeight (The original file dimensions)
serious_ImgWidth
serious_ImgHeight
serious_ImgType
serious_ImgKBytes
serious_ImgResized (Returns 1 or 0, 1 being that the output dimension has been resized)
 
<CF_IMG SRC="triangle.gif">
 
Will return the following variables:
ImgFileWidth (The original file dimensions)
ImgFileHeight (The original file dimensions)
ImgWidth
ImgHeight
ImgType
ImgKBytes
ImgResized (Returns 1 or 0, 1 being that the output dimension has been resized)

VERSION HISTORY

3(11-Sep-2003)

Added

Fixed

2.5(21-Aug-2003)

Fixed

2.4(5-Mar-2003)

Fixed

2.3(17-Oct-2002)

Added

Fixed

2.2(01-Aug-2002)

Added

Fixed

2.1(27-Jan-2002)

Added

Fixed

2

Added

Fixed

2

Added

© 2000,2001,2002,2003 last update: 11-Sep-2003, Marcel @ Serious Multimedia