Table of Contents

I. Usage

  1. Be sure to include jquery.min.js, raphael-min.js, pixelmap-min.js.
  2. Include this code in your head node:
    $(document).ready(function() {
       $('#map').pixelmap({
          // insert your options here
       });
    });
  3. Include this code in your body node:
    <div id="map">
       <ul class="points">
          <li></li>
          ...
          ...
       </ul>
    </div>

II. List Elements

You may have an unlimited amount of list elements. Just be sure they have a valid id.
Try these combinations for your list elements

Use an image only

<li id="###">
   <img id="point_image" src="image.png" width="imageWidth" height="imageHeight"/>
</li>

Use text only

<li id="###">
   <point_header>Add your copy here. Use <br /> for line breaks.</point_header>
</li>

Use an image and html text

<li id="###">
   <img id="point_image" src="image.png" width="imageWidth" height="imageHeight"/>
   <point_header>Add your copy here. Use <br /> for line breaks.</point_header>
</li>

Surround your list element in an href to make the point (not the tool tip) clickable

<li id="###">
   <a href="http://www.animike.com" target="_blank"/>
   <img id="point_image" src="image.png" width="imageWidth" height="imageHeight"/>
   <point_header>Add your copy here. Use <br /> for line breaks.</point_header>
   </a>
</li>

III. Theme Options

Canvas Settings

c_bg: "#aaa", - background hex color of the canvas
cw: 900, - the width of the canvas
ch: 500, - the height of the canvas

Map Layout Settings

point_shape: "rect", - "circle" or "rect"
offsetW: 1, - horizontal spacing between each point of the map
offsetH: 1, - vertical spacing between each point of the map
pointW: 5, - width of the points of the map
pointH: 5, - height of the points of the map
pointS: 2, - scale value of the active point on roll over
durationIn: 200, - roll over animation speed
durationOut: 100, - roll out animation speed

c_deadPoint: "#fff", - hex color of the inactive points of the map
c_hotPoint: "#ff0000", - hex color of the active points on the map
c_hotPointOver: "#fff", - hex color of the roll over value of the active point
c_hotStroke: "#ff0000", - hex color of the roll over value of the stroke of active point - set equal to c_hotPointOver if you don't want it visible
c_hotStrokeOver: "#ff0000", - hex color of the roll over value of the stroke of active point - set equal to c_hotPointOver if you don't want it visible
c_tierOne: "#eee", - hex color of the roll over value of the first tier of surrounding points
c_tierTwo: "#ddd", - hex color of the roll over value of the second tier of surrounding points

b_shadow: true, - use a shadow on the active point
a_shadow: .3, - alpha value of the shadow

Animation Settings

randomize: false, - randomize the slide show
slideshow: true, - use a slide show
showContinue: true, - have the slideshow continue after you rolloff (slideshow must be true for this to work)
slidedelay: 2000, - slide show delay
b_t1: false, - animate the first tier of surrounding points on rollover
b_t2: false, - animate the second tier of surrounding points on rollover

Tooltip settings

tooltip_delay: 0, - delay showing the tool tip after on rollover
tt_off: 5, - x and y offset (relative to the point) of the tooltip
rad: 15, - radius corner of the tooltip background
win_target: "_self", - target of the link associated with the tooltip
tt_back_col: "#000000", - color of the tooltip background
tt_back_alpha: .8, - alpha value of the tooltip background
tt_font_col: "#ffffff", - font color of the tooltip text
tt_font: "14px Arial", - font of the tooltip text "##px FontName" (should use websafe fonts)
tt_stroke_col: "#ffffff", - stroke color of the tooltip background
tt_stroke_thick: 0, - stroke thickness of the tooltip background

IV. External Sources

jQuery http:- jquery.com/

Glyphish Icons http:- glyphish.com/

Raphaël—JavaScript Library http://raphaeljs.com/