Blog Post

• Posted by:
• Richard Lee
• 8 comments
• 

A while back I was searching for an ASP.NET MVC helper for the html map (image map) tag. After an exhausting search that yielded nothing I decided to write my own. Was it worth it? I don't know - you tell me.

I will demonstrate the usage first and then provide the simple supporting code. 

1. First insert your image

Html.Image("menu", null, "~/content/images/menu.jpg", 686,100, 0, "#menumap", "", null)

2. Create some hotspot shapes

var circleShape = new CircleHotSpot
	{
		Action = "yourAction",
		AlternateText = "Alternate Text",
		Controller = "yourController",
		Title = "Title",
		Center = new Point(10, 10),
		Radius = 20
	};

var rectShape = new RectangleHotSpot
	{
		Action = "yourAction",
		AlternateText = "Alternate Text",
		Controller = "yourController",
		Title = "Title",
		TopLeft = new Point(10, 10),
		BottomRight = new Point(20, 20)
	};
						
var polyShape = new PolygonHotSpot
	{
		Action = "yourAction",
		Controller = "yourController",
		AlternateText = "Alternate Text",
		Title = "Title",
		Coordinates = new[]
						{
						new Point(6, 30),
						new Point(144, 18),
						new Point(154, 133),
						new Point(16, 145),
						new Point(6, 30)
						}
	};

3. Apply the hotspot shapes to your image

Html.ActionLink
(
	new ImageMap
	{
		ID = "menumap",
		Name = "menumap",
		Shapes = new ImageMapHotSpot[]
		         {
		         	circleShape,
					rectShape,
					polyShape 
				}
	}
)

Simple as that!

Now here is the backing code that is supporting the magic above :).

public class ImageMap
{
	public string ID { get; set; }
	public string Name { get; set; }
	public ImageMapHotSpot[] Shapes { get; set; }
	public static HtmlHelper Helper { get; set; }

	public override string ToString()
	{
		StringBuilder sb = new StringBuilder();

		sb.AppendFormat("");

		return sb.ToString();
	}
}

public abstract class ImageMapHotSpot
{
	public string Title { get; set; }
	public string AlternateText { get; set; }
	public string Action { get; set; }
	public string Controller { get; set; }
}
		
public class RectangleHotSpot : ImageMapHotSpot
{
	public Point TopLeft { get; set; }
	public Point BottomRight { get; set; }

	public override string ToString()
	{  
		var urlHelper = new UrlHelper(ImageMap.Helper.ViewContext.RequestContext);
		var url = urlHelper.Action(Action, Controller);

		return String.Format("",
			                    String.Format("{0},{1},{2},{3}", TopLeft.X, TopLeft.Y, BottomRight.X, BottomRight.Y),
			                    url, Title, AlternateText);
	}
}

public class CircleHotSpot : ImageMapHotSpot
{
	public Point Center { get; set; }
	public int Radius { get; set; }

	public override string ToString()
	{  
		var urlHelper = new UrlHelper(ImageMap.Helper.ViewContext.RequestContext);
		var url = urlHelper.Action(Action, Controller);

		return String.Format("",
			                    String.Format("{0},{1},{2}", Center.X, Center.Y, Radius),
			                    url, Title, AlternateText);
	}
}

public class PolygonHotSpot : ImageMapHotSpot
{
	public Point[] Coordinates { get; set; }

	public override string ToString()
	{
		StringBuilder sb = new StringBuilder();
  
		var urlHelper = new UrlHelper(ImageMap.Helper.ViewContext.RequestContext);
		var url = urlHelper.Action(Action, Controller);

		for (int i = 0; i < Coordinates.Length; i++)
		{
			if(i > 0)
				sb.Append(",");

			sb.AppendFormat("{0},{1}", Coordinates[i].X, Coordinates[i].Y);
		}

		return String.Format("",
			                    sb, url, Title, AlternateText);
	}
}

public static class ImageMapHelper
{
	public static string ActionLink(this HtmlHelper helper, ImageMap map)
	{
		ImageMap.Helper = helper;
		return map.ToString();
	}
}

I should really get to implementing the features which will allow me to insert images and source code download links so that I can produce shorter articles. Serves me right for not using an off-the-shelf product  :).

Here are the helper methods I forgot to include the last time around

public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
{
	return Image(helper, id, url, alternateText, null);
}

public static string Image(this HtmlHelper helper, string id, string url, string alternateText, int border)
{
	return Image(helper, id, null, url, -1, -1, 0, String.Empty, alternateText, null);
}

public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)
{
	return Image(helper, id, null, url, -1, -1, -1, null, alternateText, htmlAttributes);
}

public static string Image(
	this HtmlHelper helper,
	string id,
	string name,
	string url,
	int width,
	int height,
	int borderWidth,
	string usemap,
	string alternateText,
	object htmlAttributes
	)
{
	// Instantiate a UrlHelper   
	var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);

	// Create tag builder  
	var builder = new TagBuilder("img");

	// Create valid id  
	builder.GenerateId(id);

	// Add attributes  
	builder.MergeAttribute("src", urlHelper.Content(url));

	if(alternateText != null)
		builder.MergeAttribute("alt", alternateText);

	if(name != null)
		builder.MergeAttribute("name", name);

	if(width > -1)
		builder.MergeAttribute("width", width.ToString());

	if(height > -1)
		builder.MergeAttribute("height", height.ToString());

	if(borderWidth > -1)
		builder.MergeAttribute("style", String.Format("border: {0};", borderWidth));

	if (!String.IsNullOrEmpty(usemap))
		builder.MergeAttribute("usemap", usemap);

	builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

	// Render tag  
	return builder.ToString(TagRenderMode.SelfClosing);
}

Thanks for reading once again and feel free to leave your comments.