jQuery UI Image Mapper

Even in this era of HTML5, good old fashioned HTML image maps can still come in handy. The only problem is that creating them is a pain. Enter this fun and easy to use jQuery UI plugin. Provide it an image, and then draw circles, rectangles or polygons over it. It will generate the HTML markup you need, which you can simply copy and paste into your own markup.

Features

  • Web based interface for creating HTML image maps.
  • Creates circle areas.
  • Creates rectangle areas.
  • Creates polygon areas.
  • Generates image map markup.
  • Free and open source.

Requirements

  • jQuery 1.6+
  • Quick Start

    $(document).ready(function() {
      $("#myImage").imagemapper();
    });
    

    Now when viewed in a web browser, you should see a set of controls above the image. Follow the instructions and notice the HTML code generated appears under the selected image.

  • Events

    pt.imagemappermarkupupdated

    This event is triggered when the generated markup is updated.

    $(".selector").bind("pt.imagemappermarkupupdated", function (event, data) {
      // Runs when the generated markup is updated.
    });              
    
  • Methods

    destroy
    .imageMapper("destroy")

    Remove the image mapper completely and return the image back to its previous state.

    var myImageMapper = $(".selector").imageMapper();
    // Invoke destroy on element click.
    $(".selector2").click(function () { 
      myImageMapper.imageMapper("destroy"); 
    });
    getMarkup
    .imageMapper("getMarkup")

    Returns the generated markup.

    var myImageMapper = $(".selector").imageMapper();
    // Invoke getMarkup on element click.
    $(".selector2").click(function () {
      var markup = myImageMapper.imageMapper("getMarkup");
      var $markup = $(markup);
    });
    
  • License

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

    Copyright Planet Telex, Inc.