<dpImage>

D E F I N I T I O N:

Returns <img src="file.gif" width="100" height="220" alt="alt value">. In addition, you can push through any other values you want. The image tag will ignore everything but the number attribute and will just send your extras along.

<dpImage
  number="#"
>

E X A M P L E S:

<dpImage number="#" align="right">
returns
<img src="file.gif" width="100" height="220" alt="alt value" align="right">

<dpImage number="#" align="left" onmouseover="doSomething()">
returns
<img src="file.gif" width="100" height="220" alt="alt value" align="left" onmouseover="doSomething()">

You can also override values as follows:
<dpImage number="#" width="5">
returns <img src="file.gif" width="5" height="220" alt="alt value">

Testing Image Sizes for Layout

If you want to have wide images centered and other images aligned on the right, you can do this with an image macro. The following macro tests to see if the image width is greater than 350 pixels. If it is, it uses a centering layout. If it isn't that wide, the macro aligns the image on the right.

T A G   C O D E:

<dpMacro myImageLayout>
  <dpIf <dpImageWidth> gt 350>
       <p>
       <center>
       <dpImage>
       </center>
       <p>
   <dpElse>
        <dpImage align="right">
  </dpIf>
</dpMacro>
     
<dpStory images="on" imageMacro="myImageLayout">

E F F E C T:

Passing JavaScript or other Attributes on to Images

You may pass an "onMouseOver" event or a "vspace" on to an image associated with a story.

T A G   C O D E:

You can do this longhand:

<img src="<dpImageURL>" width="<dpImageWidth>" height="<dpImageHeight>" alt="<dpImageAlt>" onMouseOver="do something" vspace="10">

or you can do it shorthand:

<dpImage onMouseOver="do something" vspace="10">

Both examples produce identical results. <dpImage> provides a shorthand that always fills out the width, height, and alt attributes as well as creating an image tag. You can pass other values on to it or override existing values by adding attributes to the tag.


Here's an example of forcing the alt of all images to display the caption.

<dpImage alt="<dpImageCaption>">

E F F E C T:

Home: Support: Reference Guide: Image Tags: <dpImage>

Questions? Comments? Please write support@desert.net.