The Shadow
Drop-shadows for your Online Photos

Instructions

• Load image.
• Image height and width are read off your image, or you can set them manally.
• Select background page color that will match your target page.
• Adjust shadow to a darker or lighter gray if necessary, or use a colored tone.
• The drab button is useful for toning down colors toward gray. Drab colors can tend to go lighter.
• A gradient shadow blends the shadow between your two selected colors.
• A solid shadow selects a single shade between your two selected colors.
• Shadow size is the thickness of the shadow and defines the number of shades in a gradient shadow.
• A solid shadow usually looks good at about half the size of a gradient shadow.
  The program will force a round number (2,4,6).
• The shadow offset is the amount of drop in the shadow. A larger number may be used for larger images and a smaller number looks better on smaller images.
• A negative offset may be entered to create a glow effect.
• The "image placement" setting defines the alignment attribute in the image table. Its affects are displayed within the preview. Use the image placement feature when adding images directly to text. If using tables to more precisely position your images, the alignment may be set to "none."

• The code is recreated with each change to the shadow.
• Simple code is generated for a solid shadow. A separate code is required for each image on your page
• Gradient shadows give two code options:
  • A separate code is required for each image on your page when using the "single" option. If your image sizes vary considerably, like thumbnail vs large image, different size shadows look better. Multiple images may be used on the page.
  • The Page-scripted option generates one code that can be used for all the images on your page. It works well when all the images are the same general size. Insert the code near the top of your HTML code and use the examples in the resultant code to help generate your own image links throughout your page. Only one page script can be added per page and can be applied to any number of images. You may add any number of single codes to the page as well. Page-scripted shadows are added to your images using this format:

    <script>dropShadow(width,height,"URL","align[opt]",shadowOffset[opt])</script>

    Table alignment for your image is "left", "right", "center", "none" and can be omitted.
    The shadow offset can be omitted and your designed offset will be used instead. It may be changed on a per-image basis because thumbnails look better with smaller offsets.
    Coding examples:

    <script>dropShadow(400,300,"http://www.myhost.com/img.jpg")</script> or 
    <script>dropShadow(220,165,"http://www.myhost.com/img.jpg","left",10)</script>

• A preview button displays your code in a popup window. The preview may be behind this page.

• The scratchpad, with a preview option, is provided for your convenience. You may copy and paste various shadow codes for temporary storage, or it can be used to composite and preview your shadow-images and other page content.

If you are adept with HTML and CSS, you may want to use the tool to add shadows to other elements on your page. After generating Page-Scripted code, you may wrap table elements or other objects in a shadow. You will need to know the dimensions of your object, and that is best accomplished in CSS. Remember that text elements may be resized by the user, so you may want to allow scrollbars if that happens. The script should be placed at the top of your HTML page and then each element is wrapped in the following code:

<script>openShadow(width,height,"overflow","align[opt]",shadowOffset[opt])</script>
  element
<script>closeShadow()</script>

Width and height are the size of your element.
Overflow determines what to do if your element doesn't fit:
• You may use "text" to only display scrollbars when needed, or "image" to prevent scrollbars.
• You may also use the standard CSS attributes "visible", "hidden", "scroll", "auto"
• No attribute (" "), or a bogus attribute, means the element will overflow the shadow if it is too large.

A table example:

<script>openShadow(500,200,"auto","right",10)</script>
<table width="100%" height="100%" bgcolor="white"><tr><td>
  data
</td></tr></table>
<script>closeShadow()</script>

An image example:

<script>openShadow(400,300,"image","left",10)</script>
<img src="http://www.isdntek.com/tagbot/misc/bambi.jpg" width="400" height="300">
<script>closeShadow()</script>
   * (Unlike the standard page-script, the advanced feature doesn't automatically resize the image.)

An advanced clipped* image example:

<script>openShadow(200,200,"hidden","right",10)</script>
<img src="http://www.isdntek.com/tagbot/misc/bambi.jpg" 
  style="width:400px; height:300px; position:absolute; left:-100px; top:-100px;">
<script>closeShadow()</script>
   * (A "position:relative" DIV surrounds the shadowed element, so absolute positioning is feasible here.)