I want to derive a new asp:circlehotspot control - need some help

D

Dean Craig

I'm working with the new ASP.NET AJAX Control Toolkit. I have a map that
has several key areas (hot spots) where when the user hovers over them, I
want to pop up a small window with information in it (text, graphics,
whatever). I am using the asp:ImageMap control and I can use the
asp:circlehotspot control, but that only allows me to have a single hotspot.

What I want to do is create a new custom control that derives everything
from this circlehotspot, but adds an "ID" property. If I can reference
that, then I have have multiple hotspots on the image and each one can
trigger a different hover/pop-up panel.

I have never done this before, so I need some guidance. Where I'm running
into trouble is that there are two functions (MarkupName() and
GetCoordinates()) that are 'must override' in the base class. I don't want
to change them, but I have no idea what they are supposed to return. I
copied part of this from a page I found on the net where the guy was doing
something similar with the hotspot controls, but he was creating another
type (circle, rectangle, polygon, he was adding a 'diamond' shape). So the
code in the MarkupName() and GetCoordinates() are the two areas I'm having
trouble with and are his original code which doesn't apply to what I'm
trying to do at all. Here's what I've got so far:


Imports Microsoft.VisualBasic

Namespace foo
Public Class customcirclehotspot
Inherits System.Web.UI.WebControls.HotSpot

Public Sub New()
MyBase.New()
End Sub

Public Sub New(ByVal ID As String)
MyBase.New()
Me.ID = ID
End Sub

Public Property ID() As String
Get
Dim val As Object = ViewState("id")
If val Is Nothing Then
Return ""
Else
Return CStr(val)
End If
End Get
Set(ByVal value As String)
ViewState("id") = value
End Set
End Property

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

End Class

End Namespace


Am I doing it right? What do I do about the MarkupName() property and
GetCoordinates() function? I don't even know what the MarkupName is. Could
I do something as simple as Return "customcirclehotspot"?

What about the GetCoordinates() function? I have no idea what the original
returns and I don't need to change it. All I need to do is add an ID
property so the individual hotspots can be referenced by other controls.

Thanks in advance for any and all help.
 
S

Steven Cheng[MSFT]

Hello Dean,

As for the ASP.NET ImageMap control you mentioned, it can support multi
HotSpot items as below:

===========
<asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack"
ImageUrl="~/Images/simplemap.JPG">
<asp:CircleHotSpot AlternateText="hotspot00" Radius="50"
X="100" Y="100" />
<asp:CircleHotSpot AlternateText="hotspot01" Radius="50"
X="300" Y="300" />
<asp:polygonHotSpot
Coordinates="0,0,176,0,125,182,227,400,0,400" AlternateText="polyhotspot"/>
<asp:RectangleHotSpot Left="150" Top="100" Right="250"
Bottom="300" AlternateText="rectspot" />
</asp:ImageMap>
=====================

The CircleHotSpot ,RectangleHotSpot and RectangleHotSpot are not
webcontrols, they are just normal classes dervied from the HotSpot super
class. And it is the ImageMap control which will render the output html
based on all the HotSpot items in its "HotSpots" collection.

Actually the above aspx control template will result to the following html
output in client browser:

===================
<img id="ImageMap1" src="Images/simplemap.JPG" usemap="#ImageMapImageMap1"
style="border-width:0px;" /><map name="ImageMapImageMap1">
<area shape="circle" coords="100,100,50"
href="javascript:__doPostBack('ImageMap1','0')" title="hotspot00"
alt="hotspot00" /><area shape="circle" coords="300,300,50"
href="javascript:__doPostBack('ImageMap1','1')" title="hotspot01"
alt="hotspot01" /><area shape="poly"
coords="0,0,176,0,125,182,227,400,0,400"
href="javascript:__doPostBack('ImageMap1','2')" title="polyhotspot"
alt="polyhotspot" /><area shape="rect" coords="150,100,250,300"
href="javascript:__doPostBack('ImageMap1','3')" title="rectspot"
alt="rectspot" />
</map>
==================

You will find that HotSpot(and its derived classes) are actually
represented by a <area> element in html(which is child of <map> element).

#HTML <area> tag
http://www.w3schools.com/tags/tag_area.asp

#HTML <MAP>
http://www.htmlcodetutorial.com/images/_MAP.html

So for your scenario, if you want to develop a custom HotSpot class, you
can simply create a class derived from System.Web.UI.WebControls.HotSpot
and override the certain methods you need. And the "MarkupName" property
and the "GetCoordinates" method are two important members you need to
override for your custom HotSpot class:

** MarkupName determine the value will be rendered as the "shape" attribute
of the <area> element. It seems there are three possible values so far,
they are "circle", "rect" and "poly", for any non-circle and non-rectangle
shape, you can just use "poly" as the value.

** "GetCoordinates" method return the string value that will be rendered as
the "coords" atribute of <area> element. And it's value should be different
according to the "shape" attribute(MarkupName).

You can have a look at the above two articles about html <area>,<map> for
detailed info.

Hope this helps some.


Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead



==================================================

Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.



Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.

==================================================



This posting is provided "AS IS" with no warranties, and confers no rights.
 
S

Steven Cheng[MSFT]

Hi Dean,

How are you doing on this issue, does the information in my last reply
helps you some?

Please feel free to post here if there is anything else we can help.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no rights.
 
D

Dean Craig

Acutally I figured out how to do what I needed with CSS. But yes, your post
did help, I appreciate it. It gave me some more ideas and insight into how
that control (class) works.

It wasn't just a hotspot that I ended up needing. I'm using some other
controls and I needed to be able to produce seperate "ID" entries so that I
could tell the other control what its targets were, like "ID='Florida'",
"ID='California'" and "ID='Texas'".

Thanks again Steven.


Dean
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top