Alberta Cross, Broken Side of Time

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.

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.
                });
                
            
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);
                });