Tipmage

Tipmage is a javascript class aimed at creating and managing tooltips (or "notes") over images.

Tipmage makes it possible to mark rectangular portions of an image and attach a description to each one of them. The description will be shown as a tooltip when the mouse is over the right section of the image.

The class can work in two ways: in normal mode it just shows the tooltips, while in edit mode it also allows the user to edit them.

Tipmage supports the use of special callback functions to perform operations related to the editing of a tooltip (for example AJaX calls to access a database).

An external CSS stylesheet allows to customize the appearance of the user interface.

Should work on: Internet Explorer 5.5+, Firefox 1.0+, Safari 2.0+, Opera 7.6+

Example

This is how the script works. It is currently in edit mode, so you can try adding some tooltips or modifying the existing ones. Changes won't be saved, so feel free to experiment! (double-click to add new tooltips)

Usage

The following code shows the basic usage of Tipmage. For more in-depth and verbose instructions see the page on advanced Tipmage usage.

<img src="image.jpg" id="mainImage" />

<script type="text/javascript">
  var tipmage = new Tipmage('mainImage',true);
  tipmage.startup();
  tipmage.setTooltip(150,80,40,30,'I have been up here! Ha Ha! ;)');
  tipmage.setTooltip(200,185,50,20,'Where is Wally?');
</script>

To create a new tooltip, just double-click anywhere on the image. To edit a tooltip, click on its rectangle.

Advanced Usage

See the page on advanced usage for step-by-step instructions and for all the advanced features of Tipmage.

Download

Known Issues