<IMG> Property Pages Dialog Box
This dialog box allows you to adjust various properties of an image inserted into a Web page. To display the <IMG> Property Pages dialog box, either select the image in Design view or place the insertion point within the <IMG> element in HTML view. Then choose Property Pages from the View menu.
- Image source
- Specifies the full path to the image file referenced. Click the adjacent ellipsis (...) button to open the Create URL Dialog Box and browse the project to select the desired image.
Tip Reference an image file that is already included in your project. This helps ensure that the image will be deployed to your Web server together with the Web page that calls it. For more information, see Adding New Project Items.
- Alternate text
- Specifies the ALT text that a Web browser will display when the image cannot be loaded or the user chooses not to display images. In certain browsers, such as Internet Explorer, the specified alternate text will be displayed in a ToolTip whenever the user moves the mouse pointer over the image.
- Specifies how the image is aligned with the text around it.
The World Wide Web Consortium has deprecated most presentational attributes of HTML elements. Rather than set the align property of an <IMG> element, you can use the Style Builder to assign CSS-P positioning attributes to its style. For further information, see Positioning HTML Elements in Design View and Aligning and Layering HTML Elements in Design View.
Each setting for the align property aligns a certain point on the image with respect to the surrounding text. The table that follows lists the possible values.
Note The values 'absmiddle', 'baseline', 'absbottom', and 'texttop' become available when the targetSchema property of your HTML document is set to a Web browser that supports HTML 4.0 or later.
Option Aligns With Example left
left edge of image left margin (text flows to right of image)
<IMG align="left" src="">
right right edge of image right margin (text flows to left of image)
<IMG align="right" src="">
texttop top edge of image top of tallest ascender in surrounding text
<IMG align="texttop" src="">
top top edge of image standard top of surrounding text
<IMG align="top" src="">
absmiddle center of image midpoint between texttop and absbottom
<IMG align="absMiddle" src="">
middle center of image midline of surrounding text
<IMG align="middle" src="">
baseline bottom edge of image baseline of surrounding text
<IMG align="baseline" src="">
bottom bottom edge of image standard bottom of surrounding text
<IMG align="bottom" src="">
The effect of many of these settings will vary with the height of the surrounding text and elements. Also, the alignment specified in the align property of an <IMG> element takes precedence over any alignment specified by a container element. For example, if an image within a centered paragraph includes the
align="left"value, the image will be aligned to the left margin rather than centered with the paragraph text.
- Specifies the height in pixels of the space the image will occupy. If a height is not specified, the image displays at its intrinsic height. As you change this value, the image displayed scales accordingly.
- Specifies the width in pixels of the space the image will occupy. If width is not specified, the image displays at its intrinsic width. As you change values, the image displayed scales accordingly.
- Border size
- Specifies the width in pixels of the border surrounding the image. The default is no border.
- Horizontal space
- Specifies the horizontal space between the left and right sides of the image and the surrounding text. The default value is zero pixels.
- Vertical space
- Specifies the vertical space between the top and bottom of the image and the surrounding text. The default value is zero pixels.
- Local hotspot information
- Specifies the name of the
.mapfile for the image. Enter a hash mark (#) and the name or URL. Click the ellipsis (...) button to browse to the file.
<IMG>element references a
<MAP NAME="visMap01">element located elsewhere in the
<BODY>of the same page:
<IMG SRC="../Img/map01.gif" USEMAP="#visMap01">
map01.gif" is stored in a directory with the same parent as the one containing the current page. When the user moves the mouse over the image or clicks on it, Web browsers that support client-side image maps will run any event-handler functions assigned to those mouse events in that
In this example, an irregularly shaped
COORDSare omitted) runs the handler function
txtOver()when it receives the
txtOut()when it receives the
onMouseOutevent, and passes the parameter "3" to the handler
- Hotspot information on server
- Specifies that a
.mapfile located on the server is to be processed. When the user moves or clicks the mouse over the image, the
ISMAPattribute of the
<IMAGE>element directs the browser to send the x and y coordinates of the mouse location to the server along with the URL for the
.mapfile, and run any event-handler functions it assigns to those mouse events in that
Most Web browsers can process both client-side and server-side image maps. However, older browsers can process only server-side image maps. Fortunately, you can include both options:
<IMG SRC="../Img/map01.gif" USEMAP="#visMap01.map" ISMAP></A>
map01.gif" is stored in a directory with the same parent as the one containing the current page. When the user moves the mouse over the image or clicks on it, Web browsers that support client-side image maps will run any event-handler functions assigned to mouse events in that
<MAP>. If no such
<MAP>element is present, the browser will use the URL given in the
<A HREF>element to find a
visMap01.mapfile on the server. Because client-side processing is rapid, be sure to place the
HTML Markup: IMG Element, img Object | INPUT type=image Element, input type=image Object | SRC Attribute, src Property | ALIGN Attribute, align Property | About Element Positioning | MAP Element, map Object | ISMAP Attribute, isMap Property | DHTML References