ImageMapster makes HTML image maps useful.
ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works
just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.
Note: ImageMapster used to be distributed as a ZIP archive. You can still download the full package including examples and source as a zip from GitHub but I will no longer be building a version-specific ZIP file with each release.
What's New?
- PLEASE STOP HOTLINKING! Bandwidth on my web host has skyrocketed recently and I can't afford it, so I've disabled hotlinking to jquery.imagemapster.js on this site. Please host it yourself. Thanks.
- 1.2.10 released - February 25, 2012. Bug fix for broken IE9 from 1.2.9. See complete change log.
- 1.2.9 released - February 22, 2012. This version is now compatible with jQuery 1.9+. There are no other changes.
- Take a look the new introduction to
ImageMapster for absolute beginners, written by Dezynetek.
- 1.2.8 released - December 30, 2012. Minor bugfix release.
- More jsfiddle examples added on July 18, check 'em out.
- The current development version is unforunately not available, please visit github, updated recently
- The last blog post about ImageMapster was Tuesday, June 19, 2012: ImageMapster 1.2.5 released
This data is obtained in (almost) real time from github.
Data from github not available - please use the link above.
Highlight and select areas
Create cool effects by using an alternate image
Bind the image map to an external list
Show floating tooltips for areas or area groups
Use grouping and exclusion masks to create complex functionality
Automatically scale imagemaps to any display size, even while active
This web site uses CsQuery - a feature-complete (as of 2/12) server side implementation of
jQuery written in C# that I've been working on since early 2011. It is a standalone library and not framework dependent, e.g. it will work with
MVC, Webforms, or anywhere else you want to use it. It's fast enough to use in real-time to process and serve web pages.
You can manipulate HTML the same way on the server that you can with jQuery on the client - making it easy to do things like
grab stuff from other web sites and add it into a page. It lets you use CSS selectors and jQuery DOM manipulation methods against any
HTML from the server.
For grabbing data, it's much faster than using client-side requests because the end-user will never wait for the request to complete. That is,
instead of requiring each client to make requests, the server can do it on a schedule (like this) and cache the results, which will be available
(most likely) the next time the page is accessed. You can greatly reduce the amount of traffic generated, and also eliminate any
delays since all your data is gathered asynchronously. As far as the user is
concerned, it was already there. Also, since you aren't running queries from the client, you aren't limited by cross-browser
restrictions imposed by web browsers. You can grab whetever you want, from wherever you want.
Here's the basic code used to pull that stuff from GitHub. Since there's no real need to have that info updated in real time, I do it
every four hours to keep the number of server requests generated to a reasonable level. This code starts async requests when the info
is missing or stale, then updates static variables to cache their values. The CQ
object is essentially the same as a
jQuery object on the client side.
// Main entry point; "page" is the CQ representation of the markup for this page
public static void ParsePage(CQ page) {
RefreshRemoteData();
page["#devVersion"].Text(String.IsNullOrEmpty(devVersion) ?
"unforunately not available, please visit github" :
devVersion);
page["#devDate"].Text(String.IsNullOrEmpty(devDate) ?
"recently" :
devDate);
if (RecentChanges != null)
{
page["#latestChangesDetail"].Empty().Append(RecentChanges);
}
var lastLink = page["#lastBlogPostLink"];
if (LastBlogPostLink != null)
{
lastLink.Empty().Append(LastBlogPostLink);
}
else
{
lastLink.Remove();
}
}
// Each of these statements starts an async request, which when finished calls the
// delegate in the Then clause.
private static void RefreshRemoteData()
{
if (devVersion == null || LastUpdate.AddHours(4) > DateTime.Now)
{
CQ.CreateFromUrlAsync("https://raw.github.com/jamietre/ImageMapster/master/src/core.js")
.Then((Action<ICsqWebResponse>)UpdateVersionNumber);
CQ.CreateFromUrlAsync("https://github.com/jamietre/ImageMapster")
.Then((Action<ICsqWebResponse>)UpdateVersionDate);
CQ.CreateFromUrlAsync("http://blog.outsharked.com/search/label/imagemapster")
.Then((Action<ICsqWebResponse>)UpdateBlogTitle);
}
}
private static void UpdateBlogTitle(ICsqWebResponse response)
{
var csq = response.Dom;
var post = csq[".date-header"].First();
if (post.Length > 0)
{
var content = CQ.Create("<span><b>" + post.Find("span").Text() + "</b>: </span>");
var link = post.Parent().Find(".post-title a").Attr("target", "_blank");
content.Append(link);
LastBlogPostLink = content;
}
}
private static void UpdateVersionNumber(ICsqWebResponse response)
{
var js = response.Html;
var pos = js.IndexOf("version:");
if (pos >= 0)
{
int firstQ = js.IndexOf('"', pos);
int lastQ = js.IndexOf('"', firstQ + 1);
devVersion = js.Substring(firstQ + 1, lastQ - firstQ - 1);
}
LastUpdate = DateTime.Now;
}
...