 |
Web Development »
User Controls »
General
Intermediate
ImageMap.NETBy YDreamsAn ImageMap control for ASP.NET. |
C#, Windows, .NET 1.0, ASP.NET, Visual Studio, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
The .NET framework comes with a nice set of web server controls that allows you to code, for ASP.NET, in a object-oriented manner and hiding the complexity of HTML, scripts and browser versioning. Unfortunately it doesn't supply any control that can generate image maps. We have developed a control that does just that.
This article explains how you can use this control. The supplied source code can also be used as an example on how to develop your own web server controls.
ASP.NET comes with an ImageButton control that handles mouse clicks on images
but it doesn't behave exactly like an image map. The main difference is that
you can not specify sensitive areas using the ImageButton. The
consequences of this are:
ifs
that you have to maintain.
The ImageMap control solves all these problems and can do everything a
ImageButton can do.
The control supplies three classes for the creation of rectangular, circular and
polygon areas. To add these to the control you just have to create instances of
the areas and add them to the areas list using the Areas property.
The sensitive areas are handled by the order that they are added. If the areas overlap on the point that the user clicks on, then the first area is used.
Allows the creation of rectangular sensitive areas.
public ImageMapRectangleArea(Rectangle rectangle) public ImageMapRectangleArea(string hRef, Rectangle rectangle) public ImageMapRectangleArea(string hRef, Rectangle rectangle, string toolTip)
hRef - Hyperlink associated with the area. Default is null.
rectangle - location, width and heigth of the rectangular area, in
local coordinates.
toolTip - String displayed when the mouse cursor stops over the area.
Default is null.
Allows the creation of circular sensitive areas.
public ImageMapCircleArea(Point center, int radius) public ImageMapCircleArea(string hRef, Point center, int radius) public ImageMapCircleArea(string hRef, Point center, int radius, string toolTip)
hRef - Hyperlink associated with the area. Default is null.
center - Center of the circle, in local coordinates.
radius - The radius of the circle.
toolTip - String displayed when the mouse cursor stops over the area.
Default is null.
Allows the creation of polygon sensitive areas.
public ImageMapPolygonArea() public ImageMapPolygonArea(string hRef) public ImageMapPolygonArea(string hRef, string toolTip)
hRef - Hyperlink associated with the area. Default is null.
toolTip - String displayed when the mouse cursor stops over the area.
Default is null.
The polygon points are added using the Points parameter of the ImageMapPolygonArea.
You can create regular image maps with hyperlinks associated to the sensitive area. When the user clicks on them the browser jumps to the specified URL. Just add the areas with non-empty URLs.
private void Page_Load(object sender, System.EventArgs e) { // add a rectangular area imageMap.Areas.Add( new ImageMapRectangleArea("http://www.ydreams.com/", new Rectangle(405, 188, 15, 15), "Click to go to YDreams")); // add a circular area imageMap.Areas.Add( new ImageMapCircleArea("http://www.codeproject.com/", new Point(210, 197), 100, "Click to go to CodeProject")); // add a polygon area ImageMapPolygonArea polygonArea = new ImageMapPolygonArea("", "This area has no link"); polygonArea.Areas.Add(new Point(0, 0)); polygonArea.Areas.Add(new Point(100, 0)); polygonArea.Areas.Add(new Point(0, 100)); imageMap.Areas.Add(polygonArea); }
If the sensitive area has the URL set to the empty string, then it won't have an hyperlink. The mouse cursor will be an arrow but the tooltip will show up.
If you need to process, not only the area, but also the coordinates of the point where the user clicked on, you can send these to the server and have them handled there.
private void Page_Load(object sender, System.EventArgs e) { imageMap.Click += new ImageMapClickEventHandler(imageMap_Click); imageMap.Areas.Add(new ImageMapRectangleArea(null, new Rectangle(405, 188, 15, 15), "Click to go to YDreams")); imageMap.Areas.Add(new ImageMapRectangleArea(null, new Rectangle(405, 379, 15, 15), "Click to go to CodeProject")); } private void ImageMap_Click(object sender, ImageMapClickEventArgs args) { ImageMapArea area = imageMap.Areas[args.AreaIndex]; int x = args.X; int y = args.Y // add event handling code here }
To do this, you just need to assign an event handler to the Click event
of the control and assign a null URL to all the areas that you
want to be handled on the server.
The event will only be raised if the user clicks on a sensitive area. To
simulate the ImageButton you just need to add an area that occupies
all the
image.
If you want to save on traffic to the server, and the browser allows client-side scripting, you can have the events handled on the client.
private void Page_Load(object sender, System.EventArgs e) { // create an instance of the area ImageMapArea area = new ImageMapRectangleArea("http://www.codeproject.com/", new Rectangle(405, 379, 15, 15), "Click to go to CodeProject"); // add the area to the map imageMap.Areas.Add(area); // add OnMouseOver and OnMouseOut event handlers to the area area.Attributes.Add("onMouseOver", "javascript:DisplayImage(image2)"); area.Attributes.Add("onMouseOut", "javascript:DisplayImage(image1)"); // add the script called by the event handlers StringBuilder script = new StringBuilder(); script.AppendFormat("<script language="\""javascript\">{0}", Environment.NewLine); script.AppendFormat("var image1 = new Image(291, 112);{0}", Environment.NewLine); script.AppendFormat("image1.src = \"image1.png\";{0}", Environment.NewLine); script.AppendFormat("var image2 = new Image(291, 112);{0}", Environment.NewLine); script.AppendFormat("image2.src = \"image2.png\";{0}", Environment.NewLine); script.AppendFormat("function DisplayImage(image) {0}{1}", "{", Environment.NewLine); script.AppendFormat("document.imageMap.src = image.src;{0}", Environment.NewLine); script.AppendFormat("return true;{0}", Environment.NewLine); script.AppendFormat("\t{0}{1}", "}", Environment.NewLine); script.Append("</script>"); Page.RegisterClientScriptBlock("DisplayImage", script.ToString()); }
You can mix all the three types of image maps described above. The only
restriction is that you can not assign an onClick client-side
event handler to the areas that you want to have handled on the server (that
have the URL set to null).
Support more browsers. Any help is welcome...
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 3 Jul 2002 Editor: Chris Maunder |
Copyright 2002 by YDreams Everything else Copyright © CodeProject, 1999-2009 Web21 | Advertise on the Code Project |
. I simply wanted the "onclick" events for an ImageMap to be directed to a javascript function unique to that ImageMap so the code behind for onclick would fire as expected. An easy way to satisfy this, was if my ImageMap was named, im_foo, I wanted the "onclick" event to call in the html:
??
