Back to Main Page





E-Mail Me! Click Here!

Adding Pretty Pictures to Your Page

Adding graphics to a page is simple. All you need to know is one command, and the name of the file (usually a .gif or .jpg). Let's assume for a moment that you have named the file in question "mypicture.gif". To place this image on the page, type
<img src="mypicture.gif">. This will place the picture, by default, on the left.

Alignment & Text Behavior

Depending upon how you align an image on your page, text typed after it will behave differently. Take a look at the following four examples:

When no alignment is specified, text forms along the bottom line of the image, and then spills over underneath the picture as necessary.

If you enter align="left", then text will form along the very top line of the image, and continue on following lines for the entire height of the picture, and sometimes one line thereafter, before it spills over and begins to fill along the bottom. I do not know why some images get an extra line of text, but I suspect that it has to do with the height of the image not perfectly matching the height of a line of text. This can get a little confusing for the reader, especially with large images. Proceed with caution.

When align="middle" is specified, text will form along the line closest to the middle of the image and then move to the bottom of the image like this. You will notice that align=middle DOES NOT align the image to the center of the page. The only way I know of to do this is to surround the image tags with <center> and </center> OR <p align="center"> and </p>.

If you specify align="right", the picture will appear on the right side of the page, and text will form to the left. Just like align=left, text may continue one line below the image before filling in along the bottom. Again, this can be a wee bit confusing, unless you specifically set up your layout around such things.

Height and Width

You can control how much of a given image is displayed. Suppose you have a picture that is simply too tall. By adding the attributes height="#" and width="#" after the filename, you can add or subtract from the size of the graphic. In this case, the number can be either a number of pixels, or a percentage of the page's width. Most people use the "number of pixels" option, as most drawing programs will happily supply this information, and thus there is less guesswork involved. Sometimes this will modify the size of the picture itself, and in other cases, it will only add a gray area in the excess space when the grapic is enlarged. The same applies to shrinking a picture. Sometimes the image will shrink, and the rest of the time, part of the display will be removed.

Hspace and Vspace

These attributes are used to add empty (invisible) space around the edges of an image. Hspace is horizontal space, and vspace is vertical. The attribute is entered as "hspace="#" or vspace="#" where # is a number of pixels. The effect looks something like this:

"Alt="

Some people surf the internet with images turned off. While this makes pages load much faster, it can also cause them to miss the point of your page if they don't know what they are supposed to be seeing. By adding this attribute to the image tag, you can create a small text box that will form whenever a user passes the cursor over the picture (or picture placeholder if images are off.) Move your cursor over the picture below to see and example of this in action.

Using Graphics as Links

To make a picture into a link, simply put the link tags and the image tags together, as follows:
<a href="URL or Filename"><img src="picturename"></a>

This will make the picture a link, and will put a border around the image that is the same color as other links on the page. I would recommend that you also add some text explaining where the link leads (unless the image is self-explanatory, like a company logo). Also, in many cases the border can look very ugly and out of place, and many HTML programmers remove it. To do this, add border="0" as an attribute of the image tag.

<img src="picturename" border="0">

You can also make the border thicker by increasing the integer. If no border is specified, a link has a default border of 2, and a normal image will have no border.

Onmouseover & Onmouseout

This is a nifty little attribute that can be added to an image to make a message appear in the little box at the bottom of most browser windows (the one where "Page Loading" and similar messages appear).
The HTML looks like this:
<img src="image name goes here" ONMOUSEOVER="window.status='Text goes here'; return true">

Run your mouse over the image below to see what happens!!

"Onmouseout" has the opposite effect of "Onmouseover". It is typically used to clear the text box of anything created by said attribute. The HTML is virtually identical, save that "ONMOUSEOVER=" sould be replaced with "ONMOUSEOUT". You can make a different message appear in this fashion, or you can clear the box by leaving the area where text would be entered blank; make sure you still include all the punctuation, however.

Run your cursor over the image below to clear the box...

These attributes can also be placed on the same tag to make text disappear as soon as the cursor leaves the affected image(s). Reverse this to create text that is only visible so long as the cursor is NOT over the affected image(s). This attribute can also affect text, click here to see how to do this. Have fun and be creative!

One final note: I have recieved several e-mails to the tune of "how do I make my gif's move?" The answer is simple: YOU don't. Some images are animated, and others are not; this is a function of the program that created the .gif, and has nothing to do with HTML. If you want to make your own animated .gif I suggest either GIF Animator by CoffeeCup Software or Image Ready by Adobe.