Images

The <img> Element - In Depth

In our last lab, we included an image in its most basic form. We know that the <img> is both empty and replaced - that is, it takes no content and the element is replaced by the file specified in the src attribute. In some cases, this will be sufficient for the look you are trying to achieve. In many cases, however, you'll need to do more with your image.

Following is a list of all of the attributes of the <img> element:

alt	specifies alternate text to display in place of the image.
align	specifies the alignment of text around the image. Possible values are "top", "middle", "bottom", "left", and right." If you use top, middle, or bottom, only one line of text will be on the same line as the image. Left and right force the image to float in either margin with multiple lines of text wrapping around the image.
border	specifies the width of the border around the image. The default value is 0, unless the image is itself a hyperlink. In that case, the default value is 2. If you do not want a border around a hyperlinked image, you must explicitly set border="0".
height	specifies the height of the image in pixels. This, along with the width attribute, can be useful for a number of reasons. First, when you set the height and width attributes, the browser will set aside the space necessary for the image in the layout. This makes your pages load faster as the browser doesn't have to calculate where to place the text on the canvas. Second, you can use the height and width attributes to scale images (change their size on the screen). While this works well for some images, browsers aren't really the best tools to accomplish scaling. Often, images look worse, and sometimes much worse, when the browser scales them. You should probably use an image editor for this task as when you scale an image, especially to a smaller size, you've done nothing to reduce the time to download the image.
hspace	denotes the amount of space on the left and right of the image in pixels. Hspace, together with vspace form the padding of an image - the space around the image but inside the bounding box of the image on the canvas.
ismap	specifies that an image will be used as part of a server side image map
longdesc	denotes the URL of a file that contains a longer description of the image than is present in the alt attribute. This can be useful for screen reading browsers.
src	specifies the URL of the file where the image is stored. Although the <img> element is considered empty, you can think of the src attribute as the content as this is what will eventually replace the element.
usemap	specifies a client side image map to use with the image.
vspace	controls the amount of space above and below an image in pixels. See hspace above.
width	controls the width of an image in pixels. See height above.

Technically speaking, the only required attribute of the <img> element is src. We've already discussed that it's a good idea to include the alt attribute for a variety of reasons. It's also a good idea to specify the width and height of your images. This allows the browser to immediately allocate space for the image on the page and continue downloading the content.

Let's see if we can use some of the attributes from above. First, we'll need to place an image on a page with some text. Type this in a new text document:

<html>
<title>Image Manipulation</title>
<body>
<img src= "http://www.bright-moments.com/webdeveloper/images/house.gif"></img>
Here is a picture of a house!
</body>
</html>

And here's how it renders:

Here is a picture of a house!

Now let's see if we can add some attributes. Add the following attributes:

<html>
<title>Image Manipulation</title>
<body>
<img src="http://www.bright-moments.com/webdeveloper/images/house.gif"
alt="A nice house"
align="top"
border="2"
width="152"
height="106"></img>
Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.
</body>
</html>

And here's how that one looks:

A nice house Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.

We've scaled the image to half its original size, added some alternate text and a border (depending on your browser, the border may seem to disappear. That's because it may be rendered black and the background of this page is also black.). Notice that you only get one line of text on the same line as the picture when you use "top" for the align attribute. The same thing happens when you use "middle" or "bottom". Let's see if we can get the image to float in the right margin by changing the align attribute to "right":

<html>
<title>Image Manipulation</title>
<body>
<img src="http://www.bright-moments.com/webdeveloper/images/house.gif"
alt="A nice house"
align="right"
border="2"
width="152"
height="106"></img>
Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.
</body>
</html>

The results:

Notice that the text now wraps around the image. Let's add a link to the image:

<html>
<title>Image Manipulation</title>
<body>
<a href="http://www.bright-moments.com/webdeveloper/images/house.gif">
<img src="http://www.bright-moments.com/webdeveloper/images/house.gif"
alt="A nice house"
align="right"
border="2"
width="152"
height="106"></img></a>
Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.
</body>
</html>

The results:

Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.

This should cause the border to appear in all browsers. But this is a transparent image and, really, the border does nothing for the transparency effect. Let's set the border attribute equal to "0" and this time set the align attribute to "left" :

<html>
<title>Image Manipulation</title>
<body>
<a href="http://www.bright-moments.com/webdeveloper/images/house.gif">
<img src="http://www.bright-moments.com/webdeveloper/images/house.gif"
alt="A nice house"
align="left"
border="0"
width="152"
height="106"></img></a>
Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.
</body>
</html>

The results:

Finally, to see the results of vspace and hspace, let's set both of those attributes to "30" to add some space around our image:

<html>
<title>Image Manipulation</title>
<body>
<a href="http://www.bright-moments.com/webdeveloper/images/house.gif">
<img src="http://www.bright-moments.com/webdeveloper/images/house.gif"
alt="A nice house"
align="left"
border="0"
width="152"
height="106"
hspace="30"
vspace="30"></img></a>
Here is a picture of a house! The house is in a wonderful neighborhood in a wonderful town called Wonderville, USA. The students at Wonderville High recently won the Most Wonderful Award from the Wonderful Academy.
</body>
</html>

We've forced the image to sit inside a box that is 30 pixels larger in all directions so the text moves to the top of the box and away from the image. Experiment with all of the attributes of the <img> element. Almost always you can achieve the effect you are looking for.

Other Uses for Images

Many developers aren't happy with using the default bullets in HTML. So they create their own bullets as images and use them instead. Here's an example:

<html>
<title>Bullet Example</title>
<body>

<img src="http://www.bright-moments.com/webdeveloper/images/bullet.gif" alt="*" width="16" height="16"></img>HTML

<img src="http://www.bright-moments.com/webdeveloper/images/bullet.gif" alt="*" width="16" height="16"></img>XML

<img src="http://www.bright-moments.com/webdeveloper/images/bullet.gif" alt="*" width="16" height="16"></img>Java
</body>
</html>

The results:

HTML

XML

Java

Usually, this technique yields a "custom" look (for obvious reasons!). The caveats are that each bullet requires its own <img> element, alignment can sometimes be a problem, and you must break the lines manually. Also, if a list item is longer than one line, the succeeding lines will wrap underneath the image, sometimes spoiling the effect.

Another common use for images is to create custom horizontal rules. This also can add a "custom" look to the page. There are some problems with this approach. First, you must assume a screen width of 640 pixels. If you make your image wider than this, anyone who surfs at 640 by 480 will be forced to scroll horizontally - a big time gaffe. Keep your images less than 620 pixels wide to be safe. Also, the default behavior for rules is to be centered on the page. You can overcome this by setting the align attribute of the element to "center". Let's try one:

<html>
<title>Horizontal Rule Example</title>
<body>
The Top!

<img src="http://www.bright-moments.com/webdeveloper/images/rule.gif"
alt="---------------------------------------------------------------------------"></img>

The Bottom!
</body>
</html>

The results:

The Top!

The Bottom!