Modal Annotations

Modal Annotations

Javascript Widget that adds transparent modal annotations over images within a web page.

  • Language: JavaScript
    Framework: jQuery
  • Released: Jul 19, 2011
    Last Update: Jul 12, 2011

Modal Annotations is a javascript/css widget that allows you to add transparent modal annotations over images within a web page. This widget is highly customizable, allowing users to easily change the color, size, and behavior of the annotations.

Features Include:

  1. Modal Annotation div that can be applied to images on a page

  2. Ability to change Annotation Color by adding a CSS class. Colors include gray, red, green, yellow, and blue.

  3. Ability to change Annotation size by adding a CSS class. Sizes include (Big, Medium, and Small)

  4. Ability to modify Annotation Opacity, Animation Speeds, and Animation Ratios via Javascript flags.

  5. Modal Annotations has it's own css file which makes it highly extensible in terms of look and feel



It's easy get Modal Annotations up and running on your website.

1) Copy modal_annotations.js into your website's javascript directory

2) Copy modalannotationsstyle.css into your website's css directory

3) Copy all image assets from the supplied images folder into your website's images directory

4) Now add the following into your HTML file's header

//****foo.html header****

<!-- The CSS -->
<link rel="stylesheet" href="css/modal_annotations_style.css" type="text/css" media="screen"/>

<!-- The JavaScript -->
    <script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/modal_annotations.js"></script>

//****foo.html header****       

And that's it, your site is now set up with Modal Annotations. Now lets say that you have 2 images of the same dimensions called image.jpg and image_annotation.jpg. You can apply the annotation using the following notation:

//****foo.html body****

    <div class="modal_annotations">
        <div class="annotation_item">
            <div class="base_image">
                <img src="images/image.jpg" />
            <div class="overlay_image">
                <img src="images/image_annotation.png"/>

//****foo.html body****
You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.


Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

2 licenses, starting from From » $6.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

Post a comment

Or enter your name and Email
No comments have been posted yet.