CSSImageMap Control

CSSImageMap.vb:

Namespace NathanSokalski
	<System.Drawing.ToolboxBitmap(GetType(ToolboxIcons), "CSSImageMap.bmp"), System.Web.UI.ParseChildren(True, "Areas")> _
	Public Class CSSImageMap : Inherits System.Web.UI.Control : Implements System.Web.UI.IPostBackEventHandler
		Private _areas As New System.Collections.Generic.List(Of CSSImageMapArea)
		Private _imageurl As String
		Private _width As Integer = 0
		Private _height As Integer = 0
		Private Shared linktag As New HtmlLink

		<UrlProperty(), _
		Description("The URL of the image to be made into an imagemap")> _
		Public Property ImageUrl() As String
			Get
				Return Me._imageurl
			End Get
			Set(ByVal value As String)
				Me._imageurl = value
			End Set
		End Property
		<Browsable(False), _
		Description("A List of the CSSImageMapArea controls that have been added")> _
		Public ReadOnly Property Areas() As Collections.Generic.List(Of CSSImageMapArea)
			Get
				Return Me._areas
			End Get
		End Property
		<DefaultValue(0), _
		Description("The total width of the CSSImageMap. If not specified or specified as 0, the width of the image specified in ImageUrl is used")> _
		Public Property Width() As Integer
			Get
				Return Me._width
			End Get
			Set(ByVal value As Integer)
				Me._width = value
			End Set
		End Property
		<DefaultValue(0), _
		Description("The total height of the CSSImageMap. If not specified or specified as 0, the height of the image specified in ImageUrl is used")> _
		Public Property Height() As Integer
			Get
				Return Me._height
			End Get
			Set(ByVal value As Integer)
				Me._height = value
			End Set
		End Property

		Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
			writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.BackgroundImage, String.Format("url({0})", Me.ResolveClientUrl(Me._imageurl)))
			writer.AddAttribute(HtmlTextWriterAttribute.Class, "CSSImageMap")
			If Me._width = 0 OrElse Me._height = 0 Then
				Dim bmp As New System.Drawing.Bitmap(Me.Page.Server.MapPath(Me._imageurl))
				If Me._width = 0 Then writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.Width, String.Concat(bmp.Width, "px")) Else writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.Width, String.Concat(Me._width, "px"))
				If Me._height = 0 Then writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.Height, String.Concat(bmp.Height, "px")) Else writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.Height, String.Concat(Me._height, "px"))
			Else
				writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.Width, String.Concat(Me._width, "px"))
				writer.AddStyleAttribute(System.Web.UI.HtmlTextWriterStyle.Height, String.Concat(Me._height, "px"))
			End If
			writer.RenderBeginTag(System.Web.UI.HtmlTextWriterTag.Div)
			Dim temp As Integer = 0
			Dim currarea As HtmlAnchor
			For Each area As CSSImageMapArea In Me._areas
				currarea = New HtmlAnchor()
				currarea.Style.Add(System.Web.UI.HtmlTextWriterStyle.Width, String.Concat(area.Width, "px"))
				currarea.Style.Add(System.Web.UI.HtmlTextWriterStyle.Height, String.Concat(area.Height, "px"))
				currarea.Style.Add(System.Web.UI.HtmlTextWriterStyle.Left, String.Concat(area.XPosition, "px"))
				currarea.Style.Add(System.Web.UI.HtmlTextWriterStyle.Top, String.Concat(area.YPosition - temp, "px"))
				If Not String.IsNullOrEmpty(area.HRef) Then currarea.HRef = area.HRef
				If Not String.IsNullOrEmpty(area.Target) Then currarea.Target = area.Target
				If Not String.IsNullOrEmpty(area.ClientMouseOver) Then currarea.Attributes.Add("onmouseover", area.ClientMouseOver)
				If Not String.IsNullOrEmpty(area.ClientMouseOut) Then currarea.Attributes.Add("onmouseout", area.ClientMouseOut)
				If Not String.IsNullOrEmpty(area.ClientClick) Then currarea.Attributes.Add("onclick", area.ClientClick)
				If Not String.IsNullOrEmpty(area.ServerClick) Then currarea.HRef = Me.Page.ClientScript.GetPostBackClientHyperlink(Me, area.ServerClick)
				temp += area.Height
				currarea.RenderControl(writer)
			Next
			writer.RenderEndTag()
		End Sub

		Public Sub RaisePostBackEvent(ByVal eventArgument As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent
			CallByName(Me.Page, eventArgument, CallType.Method)
		End Sub

		Private Sub Ctrl_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
			If Not Me.Page.Header.Controls.Contains(linktag) Then
				CSSImageMap.linktag.Attributes.Add("rel", "stylesheet")
				CSSImageMap.linktag.Attributes.Add("type", "text/css")
				CSSImageMap.linktag.Href = Me.Page.ClientScript.GetWebResourceUrl(Me.GetType(), "CSSImageMapStyle.css")
				Me.Page.Header.Controls.Add(linktag)
			End If
		End Sub
	End Class

	<System.Drawing.ToolboxBitmap(GetType(ToolboxIcons), "CSSImageMapArea.bmp")> _
	Public Class CSSImageMapArea : Inherits System.Web.UI.Control
		Private _width As Integer = 0
		Private _height As Integer = 0
		Private _xposition As Integer = 0
		Private _YPosition As Integer = 0
		Private _href As String
		Private _target As String
		Private _clientmouseover As String
		Private _clientmouseout As String
		Private _clientclick As String
		Private _ServerClick As String
		<DefaultValue(0), Description("The width of the area")> _
		Public Property Width() As Integer
			Get
				Return Me._width
			End Get
			Set(ByVal value As Integer)
				Me._width = value
			End Set
		End Property
		<DefaultValue(0), Description("The height of the area")> Public Property Height() As Integer
			Get
				Return Me._height
			End Get
			Set(ByVal value As Integer)
				Me._height = value
			End Set
		End Property
		<DefaultValue(0), _
		Description("The X coordinate of the area relative to the left edge of the CSSImageMap")> _
		Public Property XPosition() As Integer
			Get
				Return Me._xposition
			End Get
			Set(ByVal value As Integer)
				Me._xposition = value
			End Set
		End Property
		<DefaultValue(0), _
		Description("The Y coordinate of the area relative to the top edge of the CSSImageMap")> _
		Public Property YPosition() As Integer
			Get
				Return Me._YPosition
			End Get
			Set(ByVal value As Integer)
				Me._YPosition = value
			End Set
		End Property
		<UrlProperty(), _
		Description("The Url that the user will be taken to if the area is clicked")> _
		Public Property HRef() As String
			Get
				Return Me._href
			End Get
			Set(ByVal value As String)
				Me._href = value
			End Set
		End Property
		<Description("If specified, the target used with the HRef property")> _
		Public Property Target() As String
			Get
				Return Me._target
			End Get
			Set(ByVal value As String)
				Me._target = value
			End Set
		End Property
		<Description("Any JavaScript to be executed in the area's onmouseover event")> _
		Public Property ClientMouseOver() As String
			Get
				Return Me._clientmouseover
			End Get
			Set(ByVal value As String)
				Me._clientmouseover = value
			End Set
		End Property
		<Description("Any JavaScript to be executed in the area's onmouseout event")> _
		Public Property ClientMouseOut() As String
			Get
				Return Me._clientmouseout
			End Get
			Set(ByVal value As String)
				Me._clientmouseout = value
			End Set
		End Property
		<Description("Any JavaScript to be executed in the area's onclick event")> _
		Public Property ClientClick() As String
			Get
				Return Me._clientclick
			End Get
			Set(ByVal value As String)
				Me._clientclick = value
			End Set
		End Property
		<Description("The name of a function defined in the Page that will be executed when the area is clicked")> _
		Public Property ServerClick() As String
			Get
				Return Me._ServerClick
			End Get
			Set(ByVal value As String)
				Me._ServerClick = value
			End Set
		End Property

		Public Sub New()
			MyBase.New()
		End Sub
		Public Sub New(ByVal _width As Integer, ByVal _height As Integer, ByVal x As Integer, ByVal y As Integer)
			Me.New(_width, _height, x, y, String.Empty, String.Empty)
		End Sub
		Public Sub New(ByVal _width As Integer, ByVal _height As Integer, ByVal x As Integer, ByVal y As Integer, ByVal _href As String)
			Me.New(_width, _height, x, y, _href, String.Empty)
		End Sub
		Public Sub New(ByVal _width As Integer, ByVal _height As Integer, ByVal x As Integer, ByVal y As Integer, ByVal _href As String, ByVal _target As String)
			Me._width = _width
			Me._height = _height
			Me._xposition = x
			Me._YPosition = y
			Me._href = _href
			Me._target = _target
		End Sub
	End Class
End Namespace

CSSImageMapStyle.css:

div.CSSImageMap{margin:0px;padding:0px;border-width:0px;overflow:hidden;vertical-align:top;text-align:left;}div.CSSImageMap a{display:block;position:relative;margin:0px;padding:0px;}