You can use the Image Web Part to add a picture or graphic to a Web Part Page. To more easily coordinate the image with other Web Parts on the page, you can control the vertical alignment, horizontal alignment, and background color of the image inside the Image Web Part by modifying its custom properties in a shared view.
Ways you can use the Image Web Part
Ways you can display an image
Connect the Image Web Part to another Web Part
Custom properties of the Image Web Part
Common properties of Web Parts
Ways you can use the Image Web Part
You can use the Image Web Part to:
- Add a corporate or project logo to a page.
- Display photos of employees or products.
- Make the page more visually appealing.
Top of PageWays you can display an image
There are two ways you can display an image:
- Enter a file path or hyperlink to the image file in the Image Link property text box. In this case, the image is static and does not change (unless you edit the property).
- Connect the Image Web Part to another Web Part that provides the file path or hyperlink. In this case, the image can be dynamic and can change as a result of an action in the other Web Part, such as a user selecting a row in a List View Web Part.
For example, you can connect a List View Web Part that contains
contacts to the Image Web Part. Each time you select a row in the Contacts List View Web Part that contains a column with a hyperlink to a file that contains a picture of that contact, you can see the picture of the contact displayed in the Image Web Part.
Top of PageConnect the Image Web Part to another Web Part
- On the Site Actions menu
, click Edit Page. - Click the Web Part menu
, and then point to Connections. - Point to Get an Image From, and then click the name of the Web Part to which you want to link.
Note
If the Image Link
property already has a value and you connect the Image Web Part to another Web Part, the Image Link property is ignored. If the Image Web Part is already connected to another Web Part, and you want to set a value for the Image Link property, you must first remove the connection.
Top of PageCustom properties of the Image Web Part
The custom properties of the Image Web Part are listed below.
Note
You cannot view or edit any of these custom properties in personal view.
| Property | Description |
|---|
| Image Link | Specifies a file path or hyperlink to the image that you want displayed in the Image Web Part. Depending on the browser that you are using, supported graphics file formats include the following. | Graphics
file format | File type | | Windows Bitmap (BMP) | .bmp | | Windows Enhanced Metafile (EMF) | .emf | | Graphics Interchange Format (GIF) | .gif | | Joint Photographic Experts Group (JPEG) | .jpg, .jpeg | | Portable Network Graphics (PNG) | .png |
The Image Link property may not be available because the Image Web Part is connected to another Web Part that provides the image. |
| Alternative Text | Specifies the text to display when a user rests the mouse pointer over the image. This text appears when the image is not available. |
| Image Vertical Alignment | Positions the image vertically within the Image Web Part. Select one of the following: Top, Middle, or Bottom. The default value is Middle. |
| Image Horizontal Alignment | Positions the image horizontally within the Image Web Part. Select one of the following: Left, Center, or Right. The default value is Center. |
| Web Part Background Color | Determines the color of the Image Web Part window behind the image. The default color is the background color of the current theme. To specify a color, click  to the right of the text box, and then do one of the following: - Select a color in the color grid.
- Type an HTML color name.
- Type an RGB color value.
To make the background color the same as the theme of the site, click Transparent in the Web Part Background Color dialog box. |
Top of PageCommon properties of Web Parts
All Web Parts share a common set of properties that control their appearance, layout, and advanced characteristics.
Note
The common Web Part properties that you see in the tool pane may be different from what is documented in this section for several reasons:
- To see the Advanced section in the tool pane, you must have appropriate permission.
- For a specific Web Part, a Web Part developer may have chosen not to display one or more of these common properties or may have chosen to create and display additional properties that are not listed below in the Appearance, Layout, and Advanced sections of the tool pane.
- Some permission and property settings may disable or hide Web Part properties.
Appearance
| Property | Description |
|---|
| Title | Specifies the title of the Web Part that appears in the Web Part title bar. |
| Height | Specifies the height of the Web Part. |
| Width | Specifies the width of the Web Part. |
| Chrome State | Specifies whether the entire Web Part appears on the page when a user opens the Web Part Page. By default, the chrome state is set to Normal and the entire Web Part appears. Only the title bar appears when the state is set to Minimized. |
| Chrome Type | Specifies whether the title bar and border of the Web Part frame are displayed. |
Layout
| Property | Description |
|---|
| Hidden | Specifies whether the Web Part is visible when a user opens the Web Part Page. If the check box is selected, the Web Part is visible only when you are designing the page and has the suffix (Hidden) appended to the title. You can hide a Web Part if you want to use it to provide data to another Web Part through a Web Part connection, but you don't want to display the Web Part. |
| Direction | Specifies the direction of the text in the Web Part content. For example, Arabic is a right-to-left language; English and most other European languages are left-to-right languages. This setting may not be available for all types of Web Parts. |
| Zone | Specifies the zone on the Web Part Page where the Web Part is located.
Note
Zones on the Web Part Page are not listed in the list box when you do not have permission to modify the zone. |
| Zone Index | Specifies the position of the Web Part in a zone when the zone contains more than one Web Part. To specify the order, type a positive integer in the text box. If the Web Parts in the zone are ordered from top to bottom, a value of 1 means that the Web Part appears at the top of the zone. If the Web Parts in the zone are ordered from left to right, a value of 1 means that the Web Part appears on the left of the zone. For example, when you add a Web Part to an empty zone that is ordered from top to bottom, the Zone Index is 0. When you add a second Web Part to the bottom of the zone, its Zone Index is 1. To move the second Web Part to the top of the zone, type 0, and then type 1 for the first Web Part.
Note
Each Web Part in the zone must have a unique Zone Index value. Therefore, changing the Zone Index value for the current Web Part can also change the Zone Index value for other Web Parts in the zone. |
Advanced
| Property | Description |
|---|
| Allow Minimize | Specifies whether the Web Part can be minimized. |
| Allow Close | Specifies whether the Web Part can be removed from the Web Part Page. |
| Allow Hide | Specifies whether the Web Part can be hidden. |
| Allow Zone Change | Specifies whether the Web Part can be moved to a different zone. |
| Allow Connections | Specifies whether the Web Part can participate in connections with other Web Parts. |
| Allow Editing in Personal View | Specifies whether the Web Part properties can be modified in a personal view. |
| Export Mode | Specifies the level of data that is permitted to be exported for this Web Part. Depending on your configuration, this setting may not be available. |
| Title URL | Specifies the URL of a file containing additional information about the Web Part. The file is displayed in a separate browser window when you click the Web Part title. |
| Description | Specifies the ScreenTip that appears when you rest the mouse pointer on the Web Part title or Web Part icon. The value of this property is used when you search for Web Parts by using the Search command on the Find Web Parts menu of the tool pane in the following Web Part galleries: Site, Virtual Server, and Web Part Page. |
| Help URL | Specifies the location of a file containing Help information about the Web Part. The Help information is displayed in a separate browser window when you click the Help command on the Web Part menu. |
| Help Mode | Specifies how a browser will display Help content for a Web Part. Select one of the following: - Modal Opens a separate browser window, if the browser has this capability. A user must close the window before returning to the Web page.
- Modeless Opens a separate browser window, if the browser has this capability. A user does not have to close the window before returning to the Web page. This is the default value.
- Navigate Opens the Web page in the current browser window.
Note
Even though custom Microsoft ASP.NET Web Parts support this property, default Microsoft Windows SharePoint Services 3.0 Help topics open only in a separate browser window. |
| Catalog Icon Image URL | Specifies the location of a file containing an image to be used as the Web Part icon in the Web Part List. The image size must be 16 by 16 pixels. |
| Title Icon Image URL | Specifies the location of a file containing an image to be used in the Web Part title bar. The image size must be 16 by 16 pixels. |
| Import Error Message | Specifies a message that appears if there is a problem importing the Web Part. |
Top of Page