asp.net mvc: How to image map?

Question

How in ASP.NET MVC would I construct an image map? For ref:

<map id='headerMap'>
    <area shape='rect' href="Default.aspx" coords='300,18,673,109' />
</map>

One answer of an answer of an unrelated question by markus is something similar:

<a href="<%= Url.RouteUrl("MyRoute", new { param1 = "bla", param2 = 5 }) %>">
   put in <span>whatever</span> you want, also <img src="a.gif" alt="images" />.
</a>

Sorry if this is redundant. My research indicated that this may be a version 2 mvc answer. Looking for something similar to Html.ActionLink if it exists. Obviously, I could reference the route by name and send in the parameters using that Url.RouteUrl, but is this the defacto way to handle it?

Thanks

Answer 1

You'll have to create the HTML yourself... have a look at the html that is render in classic asp.net using:

<map id='headerMap'>
    <area shape='rect' href="Default.aspx" coords='300,18,673,109' />
</map>

Then mimic that in your own asp.net mvc view replacing any of the hrefs for the map with your Url.RouteUrl calls.

E.g.

<map id="mymap" name="mymap">
    <area href="<%= Url.RouteUrl("MyRoute", new { param1 = "foo", param2 = 5 }) %>" alt="HTML and CSS Reference" shape="rect" coords="5,5,95,195">
    <area href="<%= Url.RouteUrl("MyRoute", new { param1 = "bar", param2 = 3 }) %>" alt="Design Guide" shape="rect" coords="105,5,195,195">
</map>
<image src="sitemap.gif" alt="Site map" "usemap"="#mymap" width="300" height="200">

Have a look at the different Url.RouteUrl() overloads and/or UrlHelper methods to see which one suits your situation the best.

Once you've sorted that out, my recommendation would be to encapsulate the creation of you area links into a HtmlHelper extension.

Answer 2

I was able to substitute the following and it worked just fine:

html example:

<map id='headerMap'>
   <area shape='rect' href="Default.aspx" coords='300,18,673,109' />
</map>

mvc4 example

<map id='headerMap'>
    <area shape="rect" href=@Url.Action("Default", "Home") coords="300,18,673,109">
</map>

Answer 3

Another option is to construct your image map with c#. The following link provides some helper methods that creates an image map from code within your view / controller:

http://www.avantprime.com/articles/view-article/9/asp.net-mvc-image-map-helper

Edit: Try http://web.archive.org/web/20110728032820/http://www.avantprime.com/articles/view-article/9/asp.net-mvc-image-map-helper for an archived version of the original link.