ImageAreaBase Class

This is the abstract base class for the image area types of the web server ImageMap control

Definition

Namespace: EWSoftware.ImageMaps.Web.Controls
Assembly: EWSoftware.ImageMaps.Web.Controls (in EWSoftware.ImageMaps.Web.Controls.dll) Version: 2023.1.3.0
public abstract class ImageAreaBase : IImageArea, 
	IStateManager, IAttributeAccessor
Inheritance
Object    ImageAreaBase
Derived
Implements
IImageArea, IAttributeAccessor, IStateManager

Example

This example demonstrates creating web server ImageMap controls and the various shapes derived from ImageAreaBase.

The control definitions are in the HTML. This shows an example of each image area type and the various actions that can be performed.

Example Control Usage
<%@ Register TagPrefix="ewsi" Namespace="EWSoftware.ImageMaps.Web.Controls"
  Assembly="EWSoftware.ImageMaps.Web.Controls" %>

<ewsi:ImageMap id="imMap" runat="server" ToolTip="A test image"
  ImageUrl="Images/Shapes.jpg" BorderStyle="Solid" BorderWidth="1px">
  <ewsi:ImageAreaPolygon
    ToolTip="Load google.com in search pane"
    NavigateUrl="http://www.google.com" Target="Search"
    Coordinates="150,156,218,256,250,222,244,200,268,188,294,188,258,140,220,144,178,124"
    TabIndex="4" AccessKey="P"></ewsi:ImageAreaPolygon>
  <ewsi:ImageAreaRectangle ToolTip="Go to www.EWoodruff.us"
    Rectangle="15, 16, 149, 93" NavigateUrl="http://www.ewoodruff.us"
    TabIndex="2" AccessKey="R"></ewsi:ImageAreaRectangle>
  <ewsi:ImageAreaRectangle ToolTip="Only displays this tool tip"
    Rectangle="316, 175, 208, 122" Action="None">
    </ewsi:ImageAreaRectangle>
  <ewsi:ImageAreaCircle
    ToolTip="Load Microsoft.com in a new window" CenterPoint="380, 88"
    Radius="60" NavigateUrl="http://www.microsoft.com" Target="Blank"
    TabIndex="3" AccessKey="C"></ewsi:ImageAreaCircle>
  <ewsi:ImageAreaRectangle ToolTip="Execute client-side script"
    Rectangle="12, 202, 134, 46"
    NavigateUrl="javascript: alert('Execute any client-side script');"
    TabIndex="5"></ewsi:ImageAreaRectangle>
  <ewsi:ImageAreaRectangle
    ToolTip="Click to enable/disable the other image map"
    Rectangle="6, 262, 194, 40" TabIndex="6" Action="PostBack"
    AccessKey="D"></ewsi:ImageAreaRectangle>
</ewsi:ImageMap>

<ewsi:ImageMap id="imClickMap" runat="server" ToolTip="Click an area to post back"
  ImageUrl="Images/PostBack.jpg" CausesValidation="True">
  <ewsi:ImageAreaRectangle Rectangle="0,0,20,20" Action="PostBack"
    ToolTip="Area 1" TabIndex="7" AccessKey="1" />
  <ewsi:ImageAreaRectangle Rectangle="80,0,20,20" Action="PostBack"
    ToolTip="Area 2" TabIndex="8" AccessKey="2" />
  <ewsi:ImageAreaRectangle Rectangle="0,80,20,20" Action="PostBack"
    ToolTip="Area 3" TabIndex="9" AccessKey="3" />
  <ewsi:ImageAreaRectangle Rectangle="80,80,20,20" Action="PostBack"
    ToolTip="Area 4" TabIndex="10" AccessKey="4" />
</ewsi:ImageMap>

The code in the code-behind file for the event handlers fired by the image areas that have their Action set to PostBack:

C#
/// <summary>
/// This event is fired by the image area at the bottom of the left-side
/// image map.
/// </summary>
/// <param name="sender">The sender of the event</param>
/// <param name="e">The event arguments</param>
/// <remarks>The parameters are not used and it does not cause validation
/// events to fire.  It is used to enable or disable the right-side image
/// map.</remarks>
protected void imMap_Click(object sender, ImageMapClickEventArgs e)
{
    imClickMap.Enabled = !imClickMap.Enabled;
    lblClickMsg.Text = String.Empty;
    lblEnabledMsg.Text = String.Format(CultureInfo.CurrentCulture, "Image map {0}",
        imClickMap.Enabled ? "enabled" : "disabled");

    // Apply a filter to "gray out" the image map and change the tool tip
    if(!imClickMap.Enabled)
    {
        imClickMap.Style.Add("opacity", ".25");
        imClickMap.Style.Add("filter", "Alpha(Opacity=25)");  // For older browsers
        imClickMap.ToolTip = "Disabled";
    }
    else
    {
        imClickMap.Style.Remove("opacity");
        imClickMap.Style.Remove("filter");
        imClickMap.ToolTip = "Click an area to post back";
    }
}

/// <summary>
/// This event is fired when an area on the right-side image map is clicked
/// </summary>
/// <param name="sender">The sender of the event</param>
/// <param name="e">The event arguments</param>
/// <remarks>It receives the zero based index of the clicked area plus the
/// X,Y coordinates of the clicked point within the area.  This image map
/// also causes validation events to fire.</remarks>
protected void imClickMap_Click(object sender, ImageMapClickEventArgs e)
{
    int clickCount = 0;

    if(Page.IsValid)
    {
        lblClickMsg.Text = String.Format(CultureInfo.CurrentCulture, "Clicked Area #{0}", e.AreaIndex + 1);

        // X and Y are only sent back by browsers that support the
        // event.offsetX and event.offsetY properties.
        if(e.XCoordinate != -1)
            lblClickMsg.Text += String.Format(CultureInfo.CurrentCulture, "<br>At X,Y {0},{1}",
                e.XCoordinate, e.YCoordinate);

        // Track the click count in the Tag property to test view state
        if(imClickMap.Areas[e.AreaIndex].Tag != null)
            clickCount = (int)imClickMap.Areas[e.AreaIndex].Tag;

        clickCount++;

        lblClickMsg.Text += String.Format(CultureInfo.CurrentCulture, "<br>It has been clicked {0} times",
            clickCount);

        imClickMap.Areas[e.AreaIndex].Tag = clickCount;
    }
}

Constructors

ImageAreaBase Default constructor
ImageAreaBase(String) This version of the constructor takes a URL
ImageAreaBase(String, String) This version of the constructor takes a URL and a tool tip

Properties

AccessKey This is used to get or set the access key (a shortcut key or mnemonic) for the image area
Action This defines the action to take when the area is clicked
Attributes Gets a collection of attribute name and value pairs for the area that are not directly supported by the class.
Coordinates This must be overridden to get or set the coordinate values in string form
Enabled This is used to enable or disable the image area
IsTrackingViewState Indicates whether or not view state is being tracked
NavigateUrl This is used to get or set the URL to which to navigate when the area is clicked and the Action property is set to Navigate.
Shape This must be overridden to specify the shape type
ShapeText This must be overridden to specify the HTML shape name
TabIndex This is used to get or set the tab index of the area
Tag This is used to get or set an object that contains additional user-defined data for the image area
TagString This is used to get or set a string that contains additional user-defined data for the image area. This is for use in the HTML designer.
Target This property is used to get or set the target location in which to open the window
TargetName This property is used to get or set the name of the target frame or window when the Target property is set to Other.
ToolTip This is used to get or set the tool tip to display when the mouse hovers over the area
ViewState This allows derived classes to store data in the control's view state

Methods

DrawFocusFrame This must be overridden to get the shape to draw a focus frame around itself
Equals This is overridden to allow proper comparison of image area objects
(Overrides ObjectEquals(Object))
FinalizeAllows an object to try to free resources and perform other cleanup operations before it is reclaimed by garbage collection.
(Inherited from Object)
GetAttribute Retrieve the specified attribute property from the control
GetHashCode Get a hash code for the image area object
(Overrides ObjectGetHashCode)
GetTypeGets the Type of the current instance.
(Inherited from Object)
LoadViewState Load view state
MarkAsDirty Mark all properties on the image area as dirty.
MemberwiseCloneCreates a shallow copy of the current Object.
(Inherited from Object)
SaveViewState Save view state
SetAttribute Assign an attribute and value to the control
ToString Convert the image area instance to its string description
(Overrides ObjectToString)
TrackViewState Start tracking view state

See Also