Creates a graphical user interface for defining an HTML image map around a selected image.
Although you can use any DOM element as a selector, Image Mapper will only work on the first img element it encounters. Ideally, it is applied directly to an image like:
<img id="myImage" alt="My Image" src="#" />
In order to add the Image Mapper GUI around that image, add the following JavaScript.
jQuery(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 after the selected image.
This event is triggered when the generated markup is updated.
$(".selector").bind("pt.imagemappermarkupupdated", function (event, data) { // Runs when the generated markup is updated. });
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"); });
Returns the generated markup.
var myImageMapper = $(".selector").imageMapper(); // Invoke getMarkup on element click. $(".selector2").click(function () { var markup = myImageMapper.imageMapper("getMarkup"); var $markup = $(markup); });