ImageMapClick Event

This event is raised when a hot spot on the image map is clicked

Definition

Namespace: EWSoftware.ImageMaps.Web.Controls
Assembly: EWSoftware.ImageMaps.Web.Controls (in EWSoftware.ImageMaps.Web.Controls.dll) Version: 2023.1.3.0
C#View SourceRequest Example
public event EventHandler<ImageMapClickEventArgs> Click

Value

EventHandlerImageMapClickEventArgs

Implements

IImageMapClick

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;
    }
}

See Also