Home > imageHighlighter

imageHighlighter

ImageHighlighter is a project mainly written in JavaScript, it's free.

A jQuery plugin that highlight blocks of an image when hovering over a link.

Usage (default settings shown)

$("#imgHL").imageHighlighter({
 borderColor : "#fff",         // highlight border color
 borderSize  : 4,              // highlight border thickness
 borderType  : "solid",        // highlight border type
 list        : "a",            // links that contain the highlight coordinates
 descrip     : "p",            // HTML tag sibling of the link, that contains the description text (hidden)
 descripClass: ".description", // HTML tag where description text is shown (placeholder)
 overlay     : true,           // display an overlay to make the highlight stand out
 current     : "current",      // class applied to link currently used to highlight the image
 hoverTimeout: 100,            // hoverIntent timeout (only applied if hoverIntent plugin is loaded)
 zindex      : 10              // z-index of highlight box, overlay is automatically made 1 less than this number
})

// version 1.01 - moved the editor into an extension
$("#imgHL").imageHighlighterEditor({
 useJcrop    : true            // Use Jcrop plugin if it is available
})

List HTML Tag required attribute

rel="sx1,sy1,ex2,ey2"
sx1 = Starting X position of the highlight box
sy1 = Starting Y position of the highlight box
ex2 = Ending X position of the highlight box
ey2 = Ending Y position of the highlight box

For more details, see my blog entry and view the demo source.

Previous:stronka