datapitstop » Website Help »Image TagsDirectory
There is quite a bit of flexibility when using images with your DataPitStop web site. You can use the standard <IMG SRC> HTML tag as well as 2 others we provide. Below is a description and examples of how all 3 of these are used.

Quick Jump

Technical Overview

This section is meant for those who already know how to place images on a web page using the HTML tag <IMG SRC>. If you do not know how to do this, you may want to move on to the next section.

Still here? OK, as you have noticed, you can upload images on different portions of your site like a Calendar Event, FAQ, or a web page. You may also use different options such as Mouse Text(Alt Tag), Weblink, etc. Whether you use the options or not, all we do is build the images <IMG SRC> tag for you. If you include options such as the Alt Tag, we add that as well. There's no mystery behind the way images work on DataPitStop, including their tags.

That being said, the <!UPLOADX:X!] tag enables you to embed the image anywhere on the page you want. What does this tag do? As mentioned, all it does it pull your image options, such as Mouse Text, then slap an <IMG SRC> tag in it's place. This retains the user friendly aspect of specifying Mouse Text, Image Descriptions, etc, while still being able to place your images anywhere on your page you want.

You would rather use the <IMG SRC> tag instead? No problem, with 2 caveats. First, when you use the <IMG SRC> tag, the image options you specified when you upload the image will not be used. You need to build all options yourself. The <IMG SRC> tag knows nothing about the options you specified when you uploaded your image.

Second, you need to know the path to your image. You do not know this. That's why we created the <!FILENAME:X!] tag. This tag simply replaces itself with the full path to your image. In other words, to place an image with <IMG SRC>, you would use something like <IMG SRC="<!FILENAME:X!]">. There are other situations where the <!FILENAME:X!] tag will come in handy. The tag was actually created so we could use image maps. You can use it anywhere that a full path to the image is needed.

See, there's no trickery behind using images on DataPitStop. The 2 new tags can actually make your life easier, especially the <!UPLOADX:X!] tag. Read on to find out how to use these tags.

DataPitStop Image Tag- <!UPLOADX:X!]

This is the special DataPitStop image tag. When you want to place an image on your page this is the easiest tag to use. This tag uses all of your image options you specified with your image (i.e. Description, Mouse Text, Full size Image, Weblink). The 2 options this tag takes are ALIGNMENT and the reference number for your image.
Syntax

<!UPLOADX:Y!]
X = l|r|t|m|b (left|right|top|middle|bottom)
Y = Image Reference Number

Examples

Example 1- Left
<!UPLOADL:262!] Aligned to the left.

Sample Image Aligned to the left.



Example 2- Right
<!UPLOADR:262!] Aligned to the right.

Sample Image Aligned to the right.

Example 3- Top
<!UPLOADT:262!] Aligned to the top.

Sample Image Aligned to the top.


Example 4- Middle
<!UPLOADM:262!] Aligned to the middle.

Sample Image Aligned to the middle.


Example 5- Bottom
<!UPLOADB:262!] Aligned to the bottom.

Sample Image Aligned to the bottom.

Placing an image- <IMG SRC=?>

This tag enables you to place images on your web pages. This is the standard HTML image tag. Most of the time you will want to use the UPLOAD tag described above instead. The drawback to using this tag with DataPitStop is that it DOES NOT use your image options! This means that your image Description, Mouse Text, Full size Image, and Weblink you specified when you uploaded your image will not work. If you would like to retain these options please use the UPLOAD tag described above. Also note that the <IMG SRC> tag needs the path to your image on our server. You will need to use the <!FILENAME:X!] tag for this.
Syntax

<IMG SRC="YOUR-IMAGE" ATTRIBUTE="VALUE">

This simply places the image wherever you put this tag. It also has several attributes such as aligning the image in a certain fashion or giving it Mouse Text(Alt Tag). These will be briefly outlined in the following examples.
Examples

Example 1- Border of 1
<IMG SRC="myimage.jpg" BORDER="5">




Example 2- Mouse Text(Alt Tag)
<IMG SRC="myimage.jpg" ALT="My Alt Tag">

My Alt Tag


Example 3- Width and Height
<IMG SRC="myimage.jpg" WIDTH="50" HEIGHT="30">




Example 4- Alignment
<IMG SRC="myimage.jpg" ALIGN="LEFT"> Aligned to the left.

Aligned to the left.



<IMG SRC="myimage.jpg" ALIGN="RIGHT"> Aligned to the right.

Aligned to the right.


<IMG SRC="myimage.jpg" ALIGN="TOP"> Aligned to the top.

Aligned to the top.


<IMG SRC="myimage.jpg" ALIGN="MIDDLE"> Aligned to the middle.

Aligned to the middle.


<IMG SRC="myimage.jpg" ALIGN="BOTTOM"> Aligned to the bottom

Aligned to the bottom


These are just a few of the <IMG SRC> attributes available to you. For a better list please view the HTML Quick Reference Guide.

File Path Tag- <!FILENAME:X!]

The <!FILENAME:X!] tag is very simple to use. The only option it takes is the images reference number. The sole purpose of this tag is to give you a way to insert the full path of your image onto your web page. You can use this tag with the <IMG SRC> tag or anywhere that required the full path to your image.
Syntax

<!FILENAME:X!]
X = Your images Reference Number
Result

As mentioned, all this tag does is insert the full path to your image. Here is an example of this. I am not going to use it within any tag, I am simply going to give the full path to one of my images.

If you do this:
<!FILENAME:262!]

You'll get this:
http://help.datapitstop.us/DATA/MENUDATA/FLD00001/00000262T.GIF

As you can see, all this did was give the full path to my image that has the Reference Number of 262. If you wanted to use this tag with the <IMG SRC> tag, you could do the following.

If you do this:
<IMG SRC="<!FILENAME:262!]">

You'll get this:
<IMG SRC="http://help.datapitstop.us/DATA/MENUDATA/FLD00001/00000262T.GIF">

Note that you won't get exactly this, the image will be placed on your page instead. This is the actual code it will produce.

Final Thoughts

You have all the flexibility you need with images. How you go about it is up to you. If your new to HTML and want to embed an image, use the UPLOAD tag. This is by far the easiest one to use. The other tags are easy to use, however they do not take advantage of the options you specified for your image. If you find yourself needing to use an image option, such as BORDER or image maps, you will need to use the <IMG SRC> and FILENAME tags instead.

Finally, if you still need further assistance, or something doesn't make sense, you may want to read Using Images. It contains more detailed information on how to use images on your site.
Picture