Most images used on web pages are of two types denoted by the file suffixes ".jpg" (or ".jpeg") and ".gif". Digital images are information rich and can take up alot of memory space. To reduce the amount of memory required to store images and the amount of time needed to download them over network connections, image files are compressed by subjecting them to a reversible mathematical process. The different image file suffixes refer to the type of compression algorithm used and the resultant file format. GIF stands for Graphics Interchange Format and JPG (or JPEG) stands for Joint Picture Experts Group.
Digital images have what is called a natural "aspect ratio". The aspect ratio of an image is the ratio of width to height of the original image. Often this is expressed in pixels in a WIDTH x HEIGHT relationship. Ultimately the
Web browsers allow for images to be inserted into any part of the HTML text. As such, images are referred to as "inline" images and their position relative to the text is specified by use of the <IMG> tag's attributes or properties. In its most basic format the actual image to be used is indicated by the tag's SRC attribute. The source attribute could point to a local file in the same directory as the HTML file being viewed,
<IMG src="filename.gif" />
or in another directory,
<IMG src="../images/filename.gif" />
or to another URL on the web.
<IMG src="http://cittie.student.gu.edu.au/images/filename.gif" />
Other <IMG> tag attributes determine how the image is rendered by the browser.
Description <IMG> Used to insert an inline image object into the document
(left | right | top | texttop | middle | absmiddle | baseline | bottom | absbottom )
Specifies the alignment of the image relative to surrounding text. Alignments of "left" or "right" align images with browser window margins. alt="text" Alternative text to be displayed if the browser cannot display the image. This feature is important for text only browsers. border="value" Specifies the size of the border around the image measured in pixels. controls Displays VCR-like controls with moving images. (See dynsrc attribute) dynsrc="document" Specifies the file for a video, AVI or VRML object shown within the document. height="value" Specifies the height of the image to be displayed. Plain integer values specify the absolute height in pixels. Integer values followed by a '%' character specify that the image height should be a percentage of its container height. Eg table, window, frame, etc. hspace="value" Amount of space to the left and right of the image in pixels ismap Identifies the graphic as an image map for use with server-side image maps longdesc="URL" URL of a document that contains a description of the image displayed. loop="value" Specifies the number of times that a moving image must be played. "value" should be an integer or the constant INFINITE lowsrc="document" A low resolution version of the document that the browser should display imediately before loading the high resolution version src="document" Source of the inline image. This attribute is the only one that is required for every IMG element. start="item" (fileopen | mouseover) Tells the browser when to start animating a moving image. FILEOPEN indicates as soon as the page is loaded. MOUSEOVER indicates when the mouse pointer moves over the image. suppress="option" (true | false) If SUPPRESS is set to TRUE then the image placeholder and ALT text is suppressed until the image file is located. usemap="#mapname" Specifies the map name (<MAP name="mapname">) to be used with the image that is being used as a client-side image map vspace="value" Amount of space above and below the image in pixels width="value" Specifies the width of the image to be displayed. Plain integer values specify the absolute width in pixels. Integer values followed by a '%' character specify that the image width should be a percentage of its container size.
This is used to provide a text description of the image and is vital for interoperability with speech-based and text only
This specifies how the image is positioned relative to the current textline in which it occurs:
positions the top of the image with the top of the current text line.
positions the top of the image with the top of the current text line.
Browser programs vary in how they interpret this. Some only take into account what has occurred on the text line prior to the IMG element and ignore what happens after it.
aligns the middle of the image with the midline for the current textline.
aligns the middle of the image with the baseline for the current textline.
and aligns the bottom of the image with the lowest point of the text line. This is usually the bottom of the descenders on p's and q's).
is the default and aligns the bottom of the image with the baseline.
floats the image to the current left margin, temporarily changing this margin, so that subsequent text is flowed along the image's righthand side. The rendering depends on whether there is any left aligned text or images that appear earlier than the current image in the markup. Such text (but not images) generally forces left aligned images to wrap to a new line, with the subsequent text continuing on the former line.
align=right floats the image to the current right margin, temporarily changing this margin, so that subsequent text is flowed along the image's lefthand side. The rendering depends on whether there is any right aligned text or images that appear earlier than the current image in the markup. Such text (but not images) generally forces right aligned images to wrap to a new line, with the subsequent text continuing on the former line.
Note that some browsers introduce spurious spacing with multiple left or right aligned images. As a result authors can't depend on this being the same for browsers from different developers or different versions. See the <BR> tag for ways to control text flow.width
Specifies the intended width of the image in pixels. When given together with the height, this allows browsers to reserve screen space for the image before the image data has arrived over the network. This allows the text to be placed before an image has downloaded - the page will seem to load much faster if your user has some content to review.
The image, above has a natural aspect ratio of 361 pixels wide x 253 pixels high. In this case the width and height attributes of the image tag are ignored so the browser will render the entire image at its natural size. If an <IMG> tag has either the width or height attribute set then the other attribute is adjusted to keep the image in its true or natural aspect ratio.
width="150" width=50 height="150"
Of course it is possible to override the natural aspect ratio by adjusting both the height and width attributes independently.
Using the '%' indicator can have unpredictable results as different browsers tend to render this in different ways. Some versions of Netscape render the above image as 25% of the entire browser width whereas IE will render it as 25% of the container width. In this case the container is a table data element.
Specifies the intended height of the image in pixels. When given together with the width, this allows browsers to reserve screen space for the image before the image data has arrived over the network. Example above.border
When the IMG element appears as part of a hypertext link, the browser program will generally indicate this by drawing a colored border (typically blue) around the image. This attribute can be used to set the width of this border in pixels. Use border="0" to suppress the border altogether. Browser programs are recommended to provide additional cues that the image is clickable, e.g. by changing the mouse pointer.
border="0" border="5" border="10"
This can be used to provide white space to the immediate left and right of the image. The HSPACE attribute sets the width of this white space in pixels. By default HSPACE is a small non-zero number.vspace
This can be used to provide white space above and below the image The VSPACE attribute sets the height of this white space in pixels. By default VSPACE is a small non-zero number.
In the example above, the hspace setting is easily discerned by viewing the distance between the left hand edge of the table element and the lefthand edge of the image. The vspace is discerned as the image pushes away the edge of the white container element.
This can be used to give a URL fragment identifier for a client-side image map defined with the MAP element.ismap
When the IMG element is part of a hypertext link, and the user clicks on the image, the ISMAP attribute causes the location to be passed to the server. This mechanism causes problems for text-only and speech-based browsers. Whenever its possible to do so use the MAP element instead.
Images may be included in anchor tags so that the image itself becomes a clickable link.
ie: no anchor
When an image becomes a link a coloured border region becomes visible around the image on the Web page.
<A href="index.html"><IMG src="uparrow.gif"></A>
You could remove the blue border by setting the image border attribute to 0. Like this:
ie: anchor but no border:
<A href="index.html"><IMG src="uparrow.gif" border="0"></A>
Image maps are graphics which have hot spots or links on them which direct the user to resources or locations by clicking on areas of the image. You provide a map of the graphic to tell the browser which coordinates of the image lead to which location. There are two types of image maps you can use - server side and client side. Server side maps require access to a server and are more complex than client side maps, which are interpreted by the browser itself. Client side maps are the recommended choice. Below is a client side image map:
The code for the above map looks like:
<IMG src=imgMap.gif width="250" height=250" usemap="#mymap" border="0" >
The image is defined normally, but the usemap attribute tells the browser to use the image map called 'map'.
The code for the map itself is a little more complicated:<MAP name="mymap"> <area shape="rect" coords="37,35,94,85" href="IMDemo1.html" alt="Hot Spot 1" title="Hot Spot 1"> <area shape="rect" coords="31,169,133,201" href="IMDemo2.html" alt="Hot Spot 2" title="Hot Spot 2"> <area shape="circle" coords="192,195,41" href="IMDemo3.html" alt="Hot Spot 3" title="Hot Spot 3"> <area shape="poly" coords="188,36,198,49,219,53,240,51,250,61,256,78,252,94,245,103,234,105,220,101,210, 100,201,97,193,97,185,101,181,110,176,115,163,115,153,111,147,99,147,88,154,80, 164,80,168,73,166,63,166,52,168,41,171,33,178,34,176,35" href="IMDemo4.html" alt="Hot Spot 4" title="Hot Spot 4"> </MAP>The <MAP>...</MAP> tags are used in conjunction with client-side image maps and they describe the "hotspots" in the image. The <MAP> tags must contain <AREA> tags, one for each different hotspot in the imagemap.
Areas, Coordinates and Shapes
<AREA> tags have the attributes of shape="shapename", coords="coordinate-set", alt="aternate-text", href="URL" and a title="title-name" to name the defined area.
The shape sets the shape of the hot spot (poly stands for polygonal - many sided). The coords defines the precise position of each hot spot in pixels. The href and alt attributes behaviour is as normal for anchors and images.
- rect - x1, y1, x2, y2
The rectangle shape is defined by the top left (x1, y1) and bottom right (x2, y2) corners of the rectangle in pixels. So the coords of the rectangle, 'Hot Spot 2' above, "30,169,127,201" set the top left corner as being 30 pixels left and 169 pixels down, and the bottom right corner is 127 pixels left, 201 pixels down.
- circle - x, y, r
A circle is defined by marking the centre (x, y), and then the radius(r). The coordinates of the circle above, 'Hot Spot 3', "184,194,40" define the centre as 184 pixels from the left and 194 pixels from the top. The radius is 40 pixels.
- poly - x1, y1, x2, y2, x3, y3...
A polygonal object is defined by specifying the coordinates of each corner of the object. So the polygonal shape "171,115,148,114,etc...etc..." defines corners at 117 pixels from the left, 115 pixels from the top, 148 pixels from the left, 114 pixels from the top and so on.
There are several tutorials to help you make your own image maps:
There also some tools that will assist in constructing a map. It is easiest if you use one of these programs:
Browsers are enhanced by the installation of specialist software systems called "plug-ins". To execute any multimedia object other than an image file requires access to either the operating system's standard applications or to plug-ins installed to execute/view that object type. Within a web page multimedia objects can either be linked to by using the anchor <A>...</A> tags, or are "embedded" within the page using the <EMBED>...</EMBED> tags. Multimedia objects include sounds, animations, streaming files and movies.
Sound files cannot be played by the browser software itself. No doubt this feature will be added before too long. Including a sound file into a Web page requires HTML code like this.
<A href="tada.wav">The standard windows 'tada!'</A>
The standard Windows 'tada!'.
Clicking on the link either plays the file, if the browser can handle it, or it allows you to save it to the hard drive, where it can be played with an external program.
Navigator and Internet Explorer versions 2.0 and later can deal with audio files differently. Sounds can also be placed with the embed tag, this places the file in the browser with a small control panel.
<EMBED src="tada.wav">The standard windows "tada"!</EMBED>
<EMBED> has certain attributes that can be applied:
src = url
The url of the source file.
width = value
Specifies the width of the embedded document, in pixels.
height = value
Specifies the height of the embedded document, in pixels.
parameter = value
Optional parameters to send to different audio plug-ins. Examples of parameters are play_loop = true, which loops your sound and controls = false, which hides the control box (with the play, stop and volume controls). Parameters are specific to each plug-in.
The embed tag does not work with some earlier browsers (in particular, Internet Explorer 2.0)
This is an embedded sample of the 'tada!' sound file and its execution.
You will notice that the Netscape media player plays the sound file if that particular "plugin" is loaded. If no sound plugin is loaded then an instance of the media player native to your operating system is spawned to play the file.
There are many different sound file formats. For Windows the WAVE file (*.wav) above, is the most common. Other common audio file formats are:
There are several formats of movie that are available online. These are discernable by their file suffix (extension).
- Windows Audio Visual format - *.avi
- ISO Motion Picture Experts Group - *.mpg, *.mpeg
- Apple Quicktime Movie - *.mov
The Quicktime streaming format has been incorporated into the MPEG -4 specification for use with audio-visual applications on wireless networking environments. Quicktime movies are played with either a stand-alone application or a browser plug-in.
The Windows Media Player can be used to play most other multimedia movie formats. Again, embedded files are played within the browser by a plug-in and all others cause the Media Player application to be launched as a separate window.
Streaming Media World has a comprehensive guide to video on the web using both Windows and Macintosh programs.
Macromedia's Shockwave Flash (now Adobe) is an animation format gaining wide acceptance for delivery of Web-based animation. The relatively low-bandwidth of Flash's vector-based animation format makes it ideal for adding extra life and interest to a web-site. Flash can be used to create anything from simple rollover buttons to fully animated cartoons and interactive games.
To get started with Flash, work through this introductory tutorial from FlashKit. Take some time to experiment and become familiar with the concepts of Flash. Your next step might be to use Flash to create animated buttons for your website. There is another FlashKit tutorial on building buttons.
Here are a few examples of what can be done with Flash: