how to integrate jQuery maphilight into MVC3 Razor C# project

Question

I've been trying to create a fancy image map for my website, which is built using ASP.Net MVC2 Razor C#. I came across this page: http://davidlynch.org/projects/maphilight/docs/ which was basically perfect for what I needed. Taught me a lot about how to setup etc in HTML which I wasn't familiar with.

Issue is I cannot seem to get it to work in my MVC website. Note: This website was built using the Microsoft template in Visual Web Developer 2010.

I've downloaded both the jquery.maphilight.min.js and jquery.maphilight.js Scripts and added to my scripts folder. I've also added them to my main _Layout.cshtml file here:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/lightbox.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"     type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/lightbox.js")"             type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.maphilight.js")"    type="text/javascript"></script>
</head>

I then tried to call the script in my View:

@{
    ViewBag.Title = "Course Map";
}
<fieldset>
    <legend>Course Map </legend>
    <div id="course_map">
        <img src="../../images/cmap.gif" width="500" height="421" alt="Insert Alt"     usemap="#image_map"
            border="0">
        <map name="image_map" id="image_map">
            <area href="#" title="SC" shape="poly" coords="348,213, 340,207, 338,204, 338,200, 340,196, 338,192, 335,190, 336,183, 338,178, 342,176, 347,175, 348,170, 355,170, 361,174, 362,184, 362,194, 366,200, 366,206, 369,212, 371,217, 368,222, 367,228, 369,234, 367,241, 361,243, 356,240, 352,236, 348,236, 345,231, 344,225, 346,221, 349,216" />
        </map>
    </div>
    <script type="text/javascript">        $(function () {
            $('.map').maphilight({ fade: false });
        });
    </script>
</fieldset>

The Image map coords work fine, but I don't get any fancy highlighting as demo'd in David's site. I'm fairly sure I've cocked up with how I'm calling the Javascript etc, but unsure what I've done wrong.

Appreciate any help - thanks.

that makes perfect sense, however when downloading the JS files there didn't appear to be any CSS with them - that might sound utterly stupid (well, actually it is!!), but I'm such a n00b at this, when I usually download JS templates / files for fancy additions (such as Lightbox) they usually include all that is needed - so assumed one wasn't needed... — Harry, May 02 '12 at 16:26
Actually looks like you add an attribute to the maphilight tag, did you do that? Check the source they have.. `maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"ff0000","fillOpacity":0.6}'` — Brendan, May 02 '12 at 16:28
No it looks like an attribute on the `` tag, check the source here - http://davidlynch.org/projects/maphilight/docs/demo_simple.html — Brendan, May 02 '12 at 16:33
Cheers Brendan, practically copied his code word for word (apart from the coords) and made zero difference. Coords are still accurate, but no highlighting at all. Seems like the HTML is working fine, but no JS?? — Harry, May 02 '12 at 16:42
Are you getting any JS errors? Or 404's from not being able to load particular files? Are you sure your JS is being called? — Brendan, May 02 '12 at 16:46
No errors, and no, not 100% sure, this is part of the question above, I'm not 100% I've set it up in MVC correctly (as I'm very new to it all) - I got LightBox working, so set it up similar to that, but doesn't appear like it's calling any of it from the view... — Harry, May 02 '12 at 16:48
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10805/discussion-between-brendan-and-harry) — Brendan, May 02 '12 at 16:58
Hi Brendan, just FYI, I uploaded the site publicly: http://stage.dale-harrison.com - Thanks. — Harry, May 03 '12 at 15:52
Seems I'd made the fatal mistake of missing out some config settings in the jquery.maphilight.js file. All sorted now - thank you for all the help and pointers Brendan. — Harry, May 04 '12 at 10:11

score 0 · Answer 1 · answered May 04 '12 at 10:16

Failure to properly configure the maphilight JS file so that the hi-lights actually show up.

Make sure the JS is called properly from the tag in the _Layout.cshtml file:

<script src="@Url.Content("~/Scripts/jquery.maphilight.js")"    type="text/javascript"></script>

Then going to the view call the function:

<script type="text/javascript">        $(function () {
            $('.map').maphilight({ fade: false });
        });
    </script>

My issue, as mentioned above was stupidly not configuring the JS options correctly to hi-light the .

how to integrate jQuery maphilight into MVC3 Razor C# project

1 Answers1