asp.net mvc: How to image map?

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

Solution

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.