Share via

<IMG> Property Pages Dialog Box

  • Article

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.

Appearance

  • Alignment
    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
    (default)    		 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.

  • Height
    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.

  • Width
    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.

Image Map

  • Local hotspot information
    Specifies the name of the <MAP> element or .map file for the image. Enter a hash mark (#) and the name or URL. Click the ellipsis (...) button to browse to the file.

The following <IMG> element references a <MAP NAME="visMap01"> element located elsewhere in the <BODY> of the same page:

<IMG SRC="../Img/map01.gif" USEMAP="#visMap01">

Here, "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 <AREA> of the <MAP>:

<MAP NAME="visImageMap"><AREA SHAPE="POLYGON" ALT="" HREF="javascript:void(0)" onMouseOver="txtOver('click for more')'; return true" onMouseOut="txtOut()''; return true" onClick="txtWrite(3);" COORDS="...">...</MAP>

In this example, an irregularly shaped <AREA> element (the COORDS are omitted) runs the handler function txtOver() when it receives the onMouseOver event, runs txtOut() when it receives the onMouseOut event, and passes the parameter "3" to the handler txtWrite() when clicked.

  • Hotspot information on server
    Specifies that a .map file located on the server is to be processed. When the user moves or clicks the mouse over the image, the ISMAP attribute 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 .map file, and run any event-handler functions it assigns to those mouse events in that <AREA>.

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:

<A HREF="..cgi-bin/imagemap/visMap01.map">

<IMG SRC="../Img/map01.gif" USEMAP="#visMap01.map" ISMAP></A>

Here, "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 <AREA> of the <MAP>. If no such <MAP> element is present, the browser will use the URL given in the <A HREF> element to find a visMap01.map file on the server. Because client-side processing is rapid, be sure to place the ISMAP attribute last.

See Also

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

HTML Designer: Editing HTML Pages in Design View | Document Outline Window | Editing HTML | HTML Tab, Toolbox