jQuery maphilight documentation

maphilight applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover.

It provides a single jQuery function: $('.foo').maphilight()

This would hilight every image with a map on the page: $('img[usemap]').maphilight()

Demos

The simple demo (with awful art, and examples of the metadata plugin)

A map of the world

A map of the USA

A few feature-demonstrations

Plugin methods

maphilight( [options] ): returns jQuery
Add hilight behavior to an imagemap
$.maphilight.defaults
Default settings for all maphilight calls

maphilight( [options] )

The method that adds hilight behavior to an imagemap.

Arguments:

options (optional)

A set of key/value pairs that configures the map. All options are optional.

The metadata plugin is supported, and all options can be overriden per-img, or per-area.

Overriding can also be done with the jQuery data method.

Order of inheritance:

  1. $(area).data('maphilight')
  2. $(area).metadata()
  3. $(img).data('maphilight')
  4. $(img).metadata()
  5. $(img).maphilight(options)

Example: to make one particular hilight green:

<area ... class="{fillColor:'00ff00'}">

Options:

fill (Boolean. Default: true)
Whether to fill the shape
fillColor (String. Default: '000000')
The color to fill the shape with
fillOpacity (Number. Default: 0.2)
The opacity of the fill (0 = fully transparent, 1 = fully opaque)
stroke (Boolean. Default: true)
Whether to outline the shape
strokeColor (String. Default: 'ff0000')
The color of the outline
strokeOpacity (Number. Default: 1)
The opacity of the outline (0 = fully transparent, 1 = fully opaque)
strokeWidth (Number. Default: 1)
The thickness of the outline
fade (Boolean. Default: true)
Whether to fade in the shapes on mouseover
alwaysOn (Boolean. Default: false)
Whether to always show the hilighted areas
neverOn (Boolean. Default: false)
Whether to never show the hilighted areas
(This only makes sense to use as per-area metadata, of course.)
groupBy (String. Default: false)
The name of an attribute to group areas by
If this is present then all areas in the map which have the same attribute value as the hovered area will hilight as well
wrapClass (String/bool. Default: false)
If true, applies the class on the <img> to the wrapper div maphilight created.
If a string, that string is used as a class on the wrapper div.

$.maphilight.defaults

The defaults for all uses of maphilight can be set here. If you manually replace this, you have to specify all options.

$.fn.maphilight.defaults = {
	fill: true,
	fillColor: '000000',
	fillOpacity: 0.2,
	stroke: true,
	strokeColor: 'ff0000',
	strokeOpacity: 1,
	strokeWidth: 1,
	fade: true,
	alwaysOn: false,
	neverOn: false,
	groupBy: false
}

Changelog

Tested with

Contributors

These people have contributed in some way to the project: