jQuery plugin to fetch the offset of an <area> in a <map> element.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



jQuery plugin to calculate the offset <area>'s in an image <map>. It can count the top left offset of the shape whether it be a rectangle a circle or a polygon, as well as the center of it.


<html lang="en-US">
  <meta charset="UTF-8">
  <style type="text/css">
    img {
      border-style: none;
    dl.menu {
      display: none;
      border: 1px solid black;
      position: absolute;
      margin: 0;
      padding: 10px;
      background: gold;
    dl.menu-show {
      display: block;
    nav {
      display: block;
      position: relative;
    <p>The plantes of the solar system serving as a navigation:</p>
    <map name="planetmap" id="planetmap">
      <area shape="circle" coords="84,214,14" href="#mercury" alt="Mercury" id="map-mercury" />
      <area shape="circle" coords="125,190,26" href="#venus" alt="Venus" id="map-venus" />
      <area shape="circle" coords="175,161,26" href="#earth" alt="Earth" id="map-earth" />
      <area shape="circle" coords="223,135,22" href="#mars" alt="Mars" id="map-mars" />
      <area shape="circle" coords="396,212,67" href="#jupiter" alt="Jupiter" id="map-jupiter" />
      <area shape="circle" coords="504,151,45" href="#saturn" alt="Saturn" id="map-saturn" />
      <area shape="poly" coords="550,180,580,180,580,240,550,240" nohref="nohref" alt="X" id="map-extra">
    <dl id="menu-earth" class="menu">
      <dt>Mean radius</dt>
      <dd>6,371.0 km</dd>
    <dl id="menu-venus" class="menu">
      <dt>Mean radius</dt>
      <dd>6,051.8 km</dd>
    <dl id="menu-mercury" class="menu">
      <dt>Mean radius</dt>
      <dd>2,439.7 km</dd>
    <dl id="menu-mars" class="menu">
      <dt>Mean radius</dt>
      <dd>3,396.2 km</dd>
    <dl id="menu-jupiter" class="menu">
      <dt>Mean radius</dt>
      <dd>71,492 km</dd>
    <dl id="menu-saturn" class="menu">
      <dt>Mean radius</dt>
      <dd>60,268 km</dd>
    <dl id="menu-extra" class="menu">
      <dd>Dust in space</dd>
    <img src="http://www.vtaide.com/png/images/planets3.jpg" alt="Solar system" longdesc="http://www.vtaide.com/png/images/planets3.jpg" usemap="#planetmap" id="planetimage" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.areaoffset.js"></script>
  <script type="text/javascript">
    jQuery(function ($) {
      var planetImage = $('#planetimage'),
          imageOffset = planetImage.position();

      $('#planetmap').children('area').each(function () {
        var menu = $(this.id.replace(/^map-/, '#menu-')),
            area = $(this),
            offset = $(this).areaOffset(true),
            menuOffset = {
              left : imageOffset.left + offset.left,
              top  : imageOffset.top + offset.top
        if (menu.length) {
          menu.offset(menuOffset).bind('mouseleave', function () {
        $.data(this, 'menu', menu);
      }).bind('mouseenter', function () {
        var menu = $.data(this, 'menu');

        if (menu) {

see it live