Build a custom hotspot for ImageMap

Navigation

About Me

Who is Danny Chen?

Out of the box, ImageMap will support 3 types of HotSpots: Circle, Rectangle, and Polygon. The reason for just these three shapes is that the image map standard only allow for these 3 shapes. Since polygon can create just about any shape we need, there certainly isn't any loss of flexibility.
However, entering coordinates for a polygon type of hotspot is quite tedious. Lets say we wanted a particular shape that we would reuse, it would be convenient to package that into a usable HotSpot that we could add an ImageMap. The good news is that you can. Just extend the HotSpot base class to create a custom HotSpot. In this example, I'll create a Diamond shaped hotspot.

To start with, we'll create a new class that inherits from System.Web.UI.WebControl.HotSpot. This can be in App_Code or a compiled assembly in bin. In fact, it is pretty much no different then creating a custom control.

Namespace imhs
    Public Class DiamondHotSpot
        Inherits System.Web.UI.WebControls.HotSpot

    End Class
End Namespace

Next add some properties:

        Public Property CenterX() As Integer
            Get
                Dim val As Object = ViewState("centerx")
                If val Is Nothing Then
                    Return 0
                Else
                    Return CInt(val)
                End If
            End Get
            Set(ByVal value As Integer)
                ViewState("centerx") = value
            End Set
        End Property

        ... repeated for CenterY, Width, and Height ...

Lastly, we need to override 2 functions: MarkupName and GetCoordinates
We specify the MarkupName of poly because that is the type of AREA tag we'll be using in the underlying image map (remember the standard only recognizes 3 types).

        Protected Overrides ReadOnly Property MarkupName() As String
            Get
                Return "poly"
            End Get
        End Property

        Public Overrides Function GetCoordinates() As String
            Return CenterX.ToString() & "," & _
                   (CenterY - Height/2).ToString() & "," & _
                   (CenterX + Width/2).ToString() & "," & _
                   CenterY.ToString() & "," & _
                   CenterX.ToString() & "," & _
                   (CenterY + Height/2).ToString() & "," & _
                   (CenterX - Width / 2).ToString() & "," & _
                   CenterY.ToString()
        End Function

In order to use this in our page, we treat it like any other custom control:

<%@ Register TagPrefix="imhs" Namespace="imhs" %>

And we can add it to our control programmatically or declaritively:

    Protected Sub Page_Load(ByVal sender As Object, _
                            ByVal e As System.EventArgs)
        If Not IsPostBack Then
            Dim dhs As New DiamondHotSpot
            dhs.CenterX = 100
            dhs.CenterY = 50
            dhs.Height = 100
            dhs.Width = 50
            ImageMap1.HotSpots.Add(dhs)
        End If
    End Sub

    <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/superwhiskey.jpg">
        <imhs:DiamondHotSpot CenterX="100" CenterY="50"
                             Height="100" Width="50" />
    </asp:ImageMap>

Link to full code listing

Default HotSpot Types:
Circle