HTML Graphics, Embedding Graphics

HTML Graphics

The <IMG> tag is used to embed graphics in HTML pages. They may be embedded inside other elements such as anchors. When embedded inside an anchor, then the user left clicks on the image, they will go to the designated link (rather, their browser will load a file from the designated link). The <IMG> element has no ending tag.

IMG Attributes

• SRC="../greenhomebutton.gif" - The path and filename of the image which specifies its location.
• ALT="Home" - This is a message displayed if the image could not be found.
• ALIGN="TOP" - (Depreciated). Sets the image alignment. The image is aligned to the left or right column if the value is LEFT or RIGHT,The values, TOP, MIDDLE, BOTTOM, ABSMIDDLE, and ABSBOTTOM, set the vertical alignment with items in the same line.
• VSPACE=3 - (Depreciated). The space between the image and the text above and below it in pixels.
• HSPACE=5 - (Depreciated). The space between the image and the text to the left and right of it in pixels.
• BORDER=10 - (Depreciated). Sets a border of the specified width in pixels to be drawn around the image.
• HEIGHT=33 - The height of the image. If this is not specified, the image will be the size as determined by the gif file. This can be set in pixels or a percentage of the browser window height.
• WIDTH=115 - The width of the image. If this is not specified, the image will be the size as determined by the gif file. This can be set in pixels or a percentage of the browser window width.
• ISMAP - Identifies the image as an image map. The image map lets the user point and click different parts of the image to load other web pages.
• USEMAP - Specifies the client side image map file to be used.

The line break element, <BR> and the horizontal rule element <HR> may be placed inside the <IMG> element.

Example 1

The following code will display a gif file:

<img src="MyPicture.gif" alt="Outdoor Scene">

This code sets an alternate text of "Outdoor Sceen" in the event the "MyPicture.gif" file is not displayable. This usually occur if it cannot be found or if the user has their browser controls set not to display pictures.

Example 2

In this example the additional feature is added that sets the size of the picture relative to the size of the browser window. The size of the picture is set to 20% of the height of the browser window and 40% of the width.

<img src="MyPicture.gif" alt="Outdoor Scene" height="20%" width="40%">

Example 3

If you are interested in displaying pictures that are of significant size which may be accessed for possible download for sharing with friends or family, this example gives some valuable advice. If you are interested in making several graphic files accessable from one page such as files scanned from pictures, it would be worthwhile to make a file of about one fifth the height and width of the original file, then make it a link to the original file for viewing or download. This is because the download time of your web page with many large graphic files may be excessive. In this example two smaller files are placed on a page next to each other. These files are links to the larger files to be viewed or downloaded.

<div style="text-align: center"
<a href="Picture1.gif"><img src="SmallPicture.gif" ALT="Picture1" height="20%" width="40%"></a>
<a href="Picture2.gif"><img srcC="SmallPicture2l.gif" ALT="Picture2" height="20%" width="40%"></a>
</div>

In this example the style attribute "text-align: center" is set. See the section on style and style sheet attributes for more information about this attribute.

Example 4

In this example some JavaScript code is added so the name or description of the picture is displayed when the viewer places their mouse cursor on the link.

<div style="text-align: center">
<a href="Picture1.gif" onMouseOver="window.status='Picture1' ;return true" onMouseOut="window.status='';return true"><img src="SmallPicture.gif" alt="Picture1" height="20%" width="40%"></a>
<a href="Picture2.gif" onMouseOver="window.status='Picture2' ;return true" onMouseOut="window.status='';return true"><img src="SmallPicture2l.gif" alt="Picture2" height="20%" width="40%"></a>
</div>

Example 5

The following code will display a linked image that will return you to the HTML start section:

<div style="text-align: center">
<a href="htmlintroduction.html" onMouseOver="window.status='To The HTML Start (intro) Page' ;return true" onMouseOut="window.status='';return true"><img SRC="bluestartbutton.gif" alt="Home" vspace="3" border="3" height="35" width="120"></a>
</div>

This is the result:

Image areas and Maps

To use a web browser to click on various areas of an image file and go to a specific web page depending on the area clicked upon requires the use of the <MAP> and <AREA> elements. The <MAP> element has an ending tag, </MAP> while the <AREA> element does not.

MAP and IMAGE Tags and Attributes

• <MAP> - Starts a client-side image map. This must be referenced in an image <IMG> tag. This element will include <AREA> tags.
• </MAP> - Ends the image map element.
• <AREA> - Defines areas of an image map that the user may click on to establish a link.
• SHAPE=RECT - Defines the shape of the click able area. Valid values are POLY, RECT, and CIRCLE.
• COORDS="2,50,102,101" - Defines, in pixels, the top-left and bottom-right coordinates of the clickable linked region in the image.
• HREF="leftwing.htm" - Defines the location of the web page that is loaded when the area in the image is clicked.

Example Code

<img src="airplane.gif" ismap usemap="#airplane.map">
</a> <map name="airplane.map">
<area shape="rect coordsS="2,50,102,101" HREF="leftwing.html">
<area shape="rect" coords="110,10,160,300" HREF="fusalage.html">
<area shape="rect" coords="162,50,262,101" HREF="rightwing.html"> </map>