HoverExpandExtender control

Using the control

1. The HoverExpandExtender control requires a ScriptManager on the page. Add the ScriptManager as the first control on the page.
2. Add a HoverExpandExtender, MapResourceManager, and Map control on the page.
3. Add a map resource item to the MapResourceManager and buddy it with the map.
4. Add a OverviewMap control to enable hover and expand functionality on the page and set the map, and map resource item it will show. See the following screen shot:
   
   
5. Select the HoverExpandExtender control. Do the following on the Properties page:
1. Set the TargetControlId property to the ID of the control to enable hover and expand functionality. Use the ID of the OverviewMap control previously added.
2. To configure the hover behavior, set the MouseOutOpacity and MouseOverOpacity properties between 0.0 (transparent) to 1.0 (opaque). When the mouse cursor hovers over the target control, the control is rendered using the MouseOverOpacity value. When the mouse cursor leaves the target control, it is rendered using the MouseOutOpacity value.
3. To configure the expand behavior, set the PinnedImageUrl, UnpinnedImageUrl, and ThumbnailImageUrl properties to a uniform resource locator (URL) referencing an image (use different images). If pinned, the control remains open regardless of the mouse cursor location and the PinnedImageUrl shows in the upper-right corner of the target control. If unpinned, the target control expands when the mouse cursor hovers over the control and the UnpinnedImageUrl shows in the upper-right corner of the target control. When the mouse cursor moves outside the boundary of the target control, the control collapses and shows the ThumbnailImageUrl where the control is located.
4. Set the Pinned property. By default, the Pinned property is set to true. This value can be adjusted to set the initial expanded state of the target control.
6. At runtime, the target control (OverviewMap) is expanded (pinned). As the mouse cursor moves over the target control, the opacity values change. See the following screen shot:
   
   
   Clicking the pinned image in the upper-right corner of the target control pins or unpins the control. If unpinned, and the mouse cursor moves outside the boundaries of the target control, the control collapses until the mouse cursor hovers over it again. See the following screen shot: