An image can be a plain image that simply appears on the page. An image can be embedded in an <A HREF> tag so that the user can click it to open a URL. An image can also be an image map, which has multiple clickable areas that each link to different URLS. For more information on image maps, see the section "Image Maps."
Navigator can display images that use the following types of formats:
<IMGThe SRC attribute is required.
SRC="
location"
LOWSRC="
location"
ALT="
alterntiveText"
ALIGN="
alignment"
BORDER="
borderWidth"
HEIGHT="
height"
WIDTH="
width"
HSPACE="
horizMargin"
VSPACE="
verticalMargin"
ISMAP
USEMAP="
#mapName"
NAME="
imageName"
ONABORT="
imgLoadJScode"
ONERROR="
errorJScode"
ONLOAD="
imgLoadJScode"
SUPPRESS="
suppressOrNot"
>
specifies the URL of the image to be displayed in the document.
specifies the URL of a low-resolution version of the image. This image is displayed while the image specified by the SRC attribute is loading. The idea of the LOWSRC image is that it takes up less file space than the SRC image and thus loads more quickly, giving the user something to look at while the real image is loading.
specifies text to be displayed if the browser does not support the IMG tag or if the user has suspended image loading in the browser.
specifies the alignment of the image in relation to the surrounding text. If you do not specify a value for ALIGN, Navigator uses BOTTOM as the default. Navigator 1.1
- LEFT aligns an image with the left margin.
- RIGHT aligns an image with the right margin.
- TOP aligns the top of an image with the top of the tallest item in the current line.
- ABSMIDDLE aligns the middle of an image with the middle of the text in the current line. Navigator 3.0
- ABSBOTTOM aligns the bottom of an image with the bottom of the lowest item in the current line. Navigator 3.0
- TEXTTOP aligns the top of an image with the top of the tallest text in the current line. Navigator 3.0
- MIDDLE aligns the middle of the image with the baseline of the text in the current line. Navigator 3.0
- BASELINE aligns the bottom of an image with the baseline of the text in the current line. Navigator 3.0
- BOTTOM is the same as BASELINE.
specifies the width, in pixels, of a border around the image. The value must be an integer. Navigator 1.1
specifies the height of the image, either in pixels or as a percentage of the height of the window, frame, or positioned block of HTML that contains the image. To indicate a number of pixels, specify the value as an integer, for example, "100". To indicate a percentage, specify the value as an integer followed by the percentage sign, for example "20%". Navigator 1.1.
specifies the width of the image either in pixels or as a percentage of the window, frame, or positioned block of HTML containing the image. To indicate a number of pixels, specify the value as an integer, for example, "100". To indicate a percentage, specify the value as an integer followed by the percentage sign, for example, "20%". Navigator 1.1.
specifies a margin in pixels between the left and right edges of the image and surrounding text and images. Give the value as an integer. Navigator 1.1.
specifies a margin in pixels between the top and bottom edges of the image and surrounding text and images. Give the value as an integer. Navigator 1.1.
indicatets that the image is a server-side image map. If it is, the image should be embedded inside an <A HREF> link that points to the mapping file. See the section "Image Maps" for more information about server-side image maps.
specifies that the image is a client-side image map and indicates which MAP tag defines the mapping for this image. See the section "MAP" for more information on client-side image maps.
specifies a name by which JavaScript can refer to the image.
specifies JavaScript code to execute when the user terminates the loading of an image. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies JavaScript code to execute when an error occurs during image loading such as if the URL within the <IMG> tag is bad or the image data is corrupted.
specifies the JavaScript event handler to execute when the image is loaded.
specifies whether or not the place-holder icon that appears during image loading will be displayed and if the tool tip will be active. If the tool tip is active, any text specified in the ALT attribute is displayed if the mouse rests over the image. The default value is FALSE. Navigator 4.0The value of SUPPRESS can be TRUE or FALSE.
Note, however, that if the user has set up the browser so that it does not automatically load images, the placeholder icon appears, regardless of the setting of the SUPPRESS attribute.
- TRUE: the place-holder icon is not displayed and the tool tip is disabled for that image while the image is loading.
- FALSE: the place-holder icon is displayed and the tool tip is active while the image is loading.
<IMG SRC="images/violets.jpg"
LOWSRC="images/smviol.gif"
HEIGHT=180 WIDTH=120
ALT="violets">
This example uses the following attributes to improve performance:<P><IMG SRC="images/spikey.jpg"
SUPPRESS=TRUE ALIGN=RIGHT HSPACE=40 BORDER=2
ALT="chrysanthemum">
Chrysanthemums are easy to grow, so long as you can keep the slugs and snails off them. They do very well in the fall, and there is nothing more beautiful than a large bed of chrysanthemums of all colors.
</P>
<BR CLEAR=ALL>
In this example, the HSPACE attribute creates a 40-pixel margin on either side of the the image, and the image is aligned on the right. Text wraps around the image to the left.The file images.htm shows this example in action in a separate window.
The AREA tag must be used inside a MAP tag. See the section "MAP" for details of the MAP tag.
<AREA
COORDS="
coords
"
SHAPE="
shape
"
HREF="
location
"
NOHREF
TARGET="
windowName
"
ONMOUSEOUT="
outJScode
"
ONMOUSEOVER="
overJScode
"
NAME="
areaName
"
>
The COORDS attribute is required. Either the HREF or the NOHREF attribute must be supplied.
specifies the coordinates of the area. Coordinates are measured from the upper left corner of the image. The format of the COORDS value depends on the value of the SHAPE attribute. If the SHAPE attribute is not specified, the shape is assumed to be a rectangle, and the COORDS value must be of the form "x1,y1,x2,y2". In this case, x1 and y1 are the x and y values of the upper left corner of the rectangle, and x2 and y2 are the coordinates of the lower left corner. See the discussion of the SHAPE attribute for details of the format of the COORDS value for each kind of shape.
specifies the shape of the map. Each shape has its own form of the COORDS attribute:
If you do not specify a value for SHAPE, the shape is assumed to be a rectangle.
- CIRCLE specifies a circle. If the shape is a circle, the value of the COORDS attribute must have the form "x,y,r" where x and y are the coordinates of the center of the circle, and r is the length of the radius.
- RECT specifies a rectangle. This is the default, so if you do not specify a shape, it is assumed to be a rectangle. If the shape is a rectangle, the value of the COORDS attribute must have the form "x1,y1,x2,y2" where x1 and y1 are the coordinates of the upper left corner, and x2 and y2 are the coordinates of the lower right corner.
- POLY or POLYGON specifies a polygon of up to 100 sides. If the shape is a polygon, the value of COORDS must have the form "x1,y1,x2,y2,...xn,yn". Each x,y pair is a point where two sides of the polygon meet. The last x,y pair is connected to the first to enclose the polygon.
specifies the URL to invoke when a user clicks the area.
specifies that no URL is invoked when a user clicks the area.
specifies the frame or window into which the destination document is loaded, if the value of HREF is a URL that points to a document. Navigator 2.0.See the description of special target values in the A as link section for a list of the pre-defined target values.
specifies a JavaScript event handler to execute when a user moves the mouse cursor out of the image or link text. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies a JavaScript event handler to execute when a user moves the mouse cursor over the image or link text.
specifies the name of the AREA. This name can be used to access the AREA object from JavaScript.
<AREA SHAPE=CIRCLE COORDS="50,50,25"For an example of the AREA tag inside a MAP tag, see the section "MAP."
HREF="http://home.netscape.com" >
<AREA SHAPE=RECT COORDS="50,50,100,100"
HREF="http://developer.netscape.com" >
The file images.htm opens in a new window and contains an example of a client side image map that uses the AREA tag.
An image map is a graphic that can be divided into multiple areas, and each area of the map can point to a different URL. When a user clicks a specific area in the image map, Navigator loads the URL associated with the clicked area. (The section "Image Maps" has an illustration of an image map.)
There are two different kinds of image maps: server-side image maps and client-side image maps. For server-side image maps, the mapping information is written in a separate file that resides on the web server. See the section "Image Maps" for more information about server-side image maps.
<MAP NAME="
mapName
">
<AREA ...>
...
<AREA ...>
</MAP>
The NAME attribute is required. Between the <MAP> and </MAP> tags you must put the AREA tags that define the areas in the image map.
specifies the name of the map. Use this name preceded by # as the value of the USEMAP attribute of the IMG tag for the image map.
<IMG SRC="images/shapes.gif" WIDTH=100 HEIGHT=100
ALT="shapes" USEMAP="#mainmap"
<MAP NAME="mainmap">The file images.htm shows this example in action in a separate window.
<AREA SHAPE=CIRCLE COORDS="50,50,25"
HREF="http://home.netscape.com" >
<AREA SHAPE=RECT COORDS="50,50,100,100"
HREF="http://developer.netscape.com" >
<AREA SHAPE=RECT COORDS="0,0,100,100"
HREF="http://developer.netscape.com/docs" >
</MAP>
Figure 1. Different areas of an image map invoke different URLS
With a client-side image map, the information about what part of the image invokes which URL is contained in MAP and AREA tags in the HTML file, as discussed in the section "MAP."
For a tutorial about implementing server-side image maps for NCSA web servers, see:
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html
For a tutorial on implementing server-side image maps for CERN web servers, see:http://www.w3.org/Daemon/User/CGI/HTImageDoc.html .
You can also use JavaScript to define the behavior of server-side image maps. For details, see the section Using Server-Side Image Maps in the Advanced Topics chapter of the JavaScript Guide .<A HREF="mappingfile.map">
<IMG SRC="navbar.gif" ISMAP>
</A>
Last Updated: 01/26/98 21:33:44