The HTML Lab
Images make up such an important part of the experience of the web that it is difficult for most people to accept the fact that the ability to display an image wasn't even included in the first version of HTML. Once it was introduced in the person of the <IMG> tag, however, there was no going back. The ability to display, easily, any number of high quality images distinguishes the webpage.
The IMG tag provide us with the means to display an image. This tag has numerous properties or attributes and there are several restrictions on the kinds of images that are supported. The generic form of the tag, stripped of all it's attributes except the one required attribute, the image source, would look like the following:
<img src="apple.jpg">
This tag would insert the image "apple.jpg", if it can be found in the current folder, into a webpage at the point where the tag was entered. If the image is not found the browser will most likely display an error placeholder in its place that might display an alternative text message if one exists for the missing image. An example:
The IMG tag takes a number of attributes which can alter how the image appears or can be used to provide an alternative text-only representation for the image.
On of the things that makes the IMG tag so interesting and useful are the number of attributes it can have as well as the way these attributes can be used to manipulate the image display. A more complete listing for the IMG tag above might look like:
<img border="0" src="apple.jpg" width="64" height="44" alt="Starting Points">
Here, in addition to the obligatory SRC attribute you can see four of the more common IMG tag attributes. These include:
Although certain browsers provide a wider choice of image formats that others the two most universally supported images types for display on the web are the Graphics Image Format, the .GIF, and the Joint Photographers Group format, the .JPG.
The differences between the two formats can be summarized this way: the GIF supports only 256 colors per image although it does support some advance features such as transparency and animation. The JPG on the other hand can have a color palette of millions of colors and it has built in variable compression to reduce the size of the resultant file. Generally a JPG is a better choice for a photo-realistic image (due to the finer gradations of color that it can display) while the GIF is the better choice for small clip art images or where transparency or animation is called for. A GIF will usually be a smaller file that a JPG of the same image.
The following GIF is both transparent and animated (refresh the screen to see the animation)
The animated .gif above is a different kind of image from say a JavaScript "rollover". In this form of animated image two images are substituted one for the other as the user passes their mouse over the image. You can see a sample of this by passing your mouse over EARL below.
This is accomplished by inserting the first image within a hyperlink tag and using the JavaScript "mouseover" event for the hyperlink to switch the contents of the image container (the SRC parameter) to a second (very similar) image that is already loaded into memory. Here's the source code:
First we preload the two images by inserting the following JavaScript within the BODY of our document:
<script type="text/javascript" language="javascript1.2">
<!--
{
aa=new Image;
aa.src="earl-1sm.gif";
bb=new Image;
bb.src="earl-2sm.gif";
}
//-->
</script>
Next, we insert a empty hyperlink (or you could use a real address if you wish the image to serve up an actual link) and then we use the "onmouseover" and "onmouseout" events to switch images for the image which we have identified as "earlpic". You could of course name the image anything you want but you must uniquely identify the picture for this technique to work.
<a onmouseover="earlpic.src=bb.src" onmouseout="earlpic.src=aa.src" href="">
<img border="0" src="earl-1sm.gif" width="158" height="203" id="earlpic" />
</a>
Where can you obtain images? Well, you can use a digital camera to create some digital photographs or you can use a Paint program like Photoshop or Corel Paint to create your own. You could purchase clip=art collections or find several free collections on the web. Images that appear on the web that are not protected by copyright can be saved to disk by right-clicking on them in the browser and selecting "Save Picture As" in the context menu that pops up. Here are some of the more commonly used QV specific images:
Once an image in inserted into a webpage FrontPage will allow you to view and change it's properties by right-clicking on the image and selecting Picture Properties. All of the IMG tag attributes such as border, width, height, and alt can be set from this dialog. The three tabbed dialog box looks like this:
last update:
02/26/2004
by: michael lynch
