![]() Change the shape of each area to Circle, Polygon and Rectangle Click the blue '+' button to add areas.Drag and drop a copy of the stack into your webpage.Once installed into Stacks and RapidWeaver, open your Stacks library and search for 'ImageMapper'.SetupFollow these simple instructions for setting up ImageMapper, with mostly the default settings and the test image applied: It was placed inside a free Shady stack, to accomplish the shadowed box effect. Support for custom attributes means you could potentially make use of addon lightbox effects too.ĮxampleHere is a quick working example of ImageMapper, using the default settings. Either links could be configured to open on other webpages or you could use anchors to scroll to other places in the same page. Possible alternatives to ImageMapper include the free HotSpots stack and the premium HotSpotsPro stack.Ī stack like ImageMapper could be used to create an interesting format of website navigation. As the screen is made smaller, some jQuery Javascript code is used to recalculate the point coordinates therefore avoiding the issue of the image becoming cropped or your areas not aligning correctly with the image underneath. What's particularly nice about ImageMapper is that alongside support for regular rectangle shapes, it can also handle circles and more intricate polygon shapes. A couple of new features extend what you can do with ImageMapper. ![]() This latest version modernises the user interface. ImageMapper was originally developed by Tsooj Media.
0 Comments
Leave a Reply. |